Changeset 3682828

Timestamp:

09/05/2026 09:42:55 PM (7 weeks ago)

Author:

xcastaneda

Message:

Release 1.5.0

Location:

squishify

Files:

• tags/1.5.0 (copied) (copied from squishify/trunk )
• tags/1.5.0/assets/assets/empty-bg-rQTXw-s9.avif (added)
• tags/1.5.0/assets/assets/encode.worker-BqxZ11_8.js (added)
• tags/1.5.0/assets/assets/encode.worker-CNcBUqEy.js (deleted)
• tags/1.5.0/assets/squishify-wp.css (modified) (49 diffs)
• tags/1.5.0/assets/squishify-wp.js (modified) (86 diffs)
• tags/1.5.0/readme.txt (modified) (2 diffs)
• tags/1.5.0/squishify.php (modified) (2 diffs)
• trunk/assets/assets/empty-bg-rQTXw-s9.avif (added)
• trunk/assets/assets/encode.worker-BqxZ11_8.js (added)
• trunk/assets/assets/encode.worker-CNcBUqEy.js (deleted)
• trunk/assets/squishify-wp.css (modified) (49 diffs)
• trunk/assets/squishify-wp.js (modified) (86 diffs)
• trunk/readme.txt (modified) (2 diffs)
• trunk/squishify.php (modified) (2 diffs)

squishify/tags/1.5.0/assets/squishify-wp.css

@@ -46 +46 @@
     --sans: -apple-system, "Segoe UI", ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;
 
+    /* The viewport budget for the app's OWN chrome, spent by #imgOriginal's
+       max-height so the compare panes can't outgrow the stage. 340px is the
+       long-standing figure for the file heading, controls bar and paddings;
+       #52's footer adds ~44px on every surface, and the header adds ~52px
+       more on the hosts that render one — which is exactly what the :has()
+       below is asking. --sqfy-vh-offset stays what it always was: extra
+       chrome a HOST shell adds outside the app (the WP overlay's header). */
+    --sqfy-app-chrome: 384px;
+
     background:var(--bg);
     color:var(--text);
@@ -72 +81 @@
   }
 
-  /* ---------- sidebar brand heading ---------- */
+  /* A host that renders the core header spends 52px more of the viewport on
+     chrome. Asking the DOM rather than threading another config flag through
+     four adapters: the header is present iff the host supplied brandHTML, so
+     the markup already IS the answer. */
+  .sqfy-app:has(.app-header){ --sqfy-app-chrome: 436px; }
+
+  /* ---------- app header (#52) ---------- */
+  /* Exists only when the host supplied brandHTML (template.js). Modelled on
+     the WordPress overlay's own 48px header, which has been doing this job on
+     the other surface all along — logo left, tier badge and menu right, for
+     the whole session. Web used to keep its identity in the queue rail, so it
+     was the one surface that lost its logo halfway through a job. */
+  /* THREE TRACKS, NOT FLEX WITH A SPACER. The centre one holds the view
+     switch, and a centred control has to be centred on the HEADER — with
+     flex it would centre on whatever room the brand and the chrome slot left
+     over, so it would drift sideways as a trial countdown appeared or a
+     wordmark changed width. Equal outer tracks pin it to the real middle and
+     make the brand's left edge and the chrome's right edge independent of
+     each other. minmax(0,…) so a long brand shrinks instead of overflowing. */
+  .sqfy-app .app-header{
+    flex:none;
+    display:grid;
+    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items:center;
+    gap:14px;
+    height:52px;
+    padding:0 18px;
+    background:var(--surface);
+    border-bottom:1px solid var(--border);
+  }
+  .sqfy-app .app-header-center{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    min-width:0;
+  }
+  .sqfy-app .app-header-slot{
+    display:flex;
+    align-items:center;
+    justify-content:flex-end;
+    gap:8px;
+    min-width:0;
+  }
+
+  /* ---------- the view switch (roadmap #51) ---------- */
+  /* Same segmented-control vocabulary as rename's mode switcher — inset track,
+     transparent segments, --select-tint/--select-ink on the active one. That
+     pair exists precisely so "this one is active" looks the same wherever the
+     app says it, and a second treatment here would make two controls that do
+     the same job look like two different kinds of thing.
+     Scoped under .sqfy-app like everything else, which is why config.headerSlot
+     has to sit inside that scope on hosts that own their header (app.js). */
+  .sqfy-app .view-switch{
+    display:flex;
+    gap:3px;
+    padding:3px;
+    background:var(--surface-2);
+    border:1px solid var(--border);
+    border-radius:var(--radius-pill);
+  }
+  .sqfy-app .view-switch-btn{
+    display:inline-flex;
+    align-items:center;
+    gap:6px;
+    padding:6px 14px;
+    border:0;
+    border-radius:var(--radius-pill);
+    background:transparent;
+    color:var(--text-dim);
+    font:inherit;
+    font-size:0.82rem;
+    font-weight:600;
+    white-space:nowrap;
+    cursor:pointer;
+    transition:background .12s ease, color .12s ease;
+  }
+  .sqfy-app .view-switch-btn:hover{ color:var(--text); }
+  .sqfy-app .view-switch-btn.active{
+    background:var(--select-tint);
+    color:var(--select-ink);
+    /* The active segment is where you ARE, not somewhere to go. */
+    cursor:default;
+  }
+  .sqfy-app .view-switch-btn:focus-visible{
+    outline:2px solid var(--purple);
+    outline-offset:-2px;
+  }
+  @media (max-width: 620px){
+    /* The glyphs carry it below this — two words plus two icons plus a brand
+       plus the chrome slot is more than a 48px bar holds, and grid/single is
+       the one distinction a picture makes on its own. */
+    .sqfy-app .view-switch-btn span{ display:none; }
+    .sqfy-app .view-switch-btn{ padding:6px 10px; }
+  }
+
+  /* The brand lockup — horizontal now that it sits in a header rather than
+     stacked at the top of a 310px column. */
   .sqfy-app .brand-heading{
     display:flex;
-    flex-direction:column;
-    gap:8px;
-    padding:24px 16px;
-    border-bottom:1px solid var(--border);
+    align-items:center;
+    gap:12px;
+    min-width:0;
   }
   .sqfy-app .brand-heading .brand-mark{
-    width:80%; height:auto;
+    height:24px;
+    width:auto;
     display:block;
     object-fit:contain;
-    margin: 0 auto;
+    flex:none;
   }
   .sqfy-app .brand-heading .sub{
     font-size:0.78rem;
-    line-height:1.35;
+    line-height:1.2;
     color:var(--text-dim);
-    text-align:center;
-    text-wrap:balance;
+    /* The tagline is the first thing to go when the header gets tight: the
+       logo identifies, the tagline explains, and on a narrow window the
+       controls to the right have the stronger claim on the space. */
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    min-width:0;
+    padding-left:12px;
+    border-left:1px solid var(--border);
+  }
+
+  /* ---------- app footer (#52) ---------- */
+  /* The promise on the left, the host's own links on the right. Rendered on
+     every surface, because the promise matters on every surface — and because
+     it is now the ONLY copy of it. */
+  .sqfy-app .app-footer{
+    flex:none;
+    display:flex;
+    align-items:center;
+    gap:16px;
+    padding:11px 18px;
+    background:var(--surface);
+    border-top:1px solid var(--border);
+  }
+  /* Allowed to shrink. It inherited flex:none from its old life as the rail's
+     bottom corner, where nothing competed for the width — in a footer beside
+     the site links that meant the two simply overflowed the bar together
+     below about 1080px instead of giving anything up. */
+  .sqfy-app .app-footer .privacy-note{ flex:0 1 auto; min-width:0; }
+  .sqfy-app .app-footer-slot{
+    display:flex;
+    align-items:center;
+    flex:none;
+    min-width:0;
+  }
+  /* THE FOOTER GIVES THINGS UP IN ORDER, LEAD LAST. The lead ("Free forever"
+     / "Private by design") is the claim and it survives every width; the rest
+     of the sentence is the evidence for it. So the tail goes first, at the
+     width where the two halves stop fitting side by side. */
+  @media (max-width: 1100px){
+    .sqfy-app .app-footer .privacy-rest{ display:none; }
+  }
+  /* THE LINKS DO NOT GO. They used to be dropped here on the same reasoning —
+     the header menu carries the same pages, so the footer copy is one route
+     among two — but that reasoning was about a footer that had to fit ONE
+     LINE. Below this width it does not have to: the page scrolls on mobile,
+     so the footer can be two rows and keep everything (Xavier, 2026-08-31).
+     A row of links at the true bottom of a scrolling page is also the shape
+     every site has, which is where someone goes looking for them.
+     .made-by-menu already wraps at 900px (web.css), so a narrow screen gets
+     them on as many lines as it needs rather than one that overflows. */
+  @media (max-width: 680px){
+    .sqfy-app .app-footer{
+      flex-direction:column;
+      align-items:flex-start;
+      gap:9px;
+      padding:12px 16px 14px;
+    }
+    /* Full width so the centred nav inside it centres on the FOOTER rather
+       than on its own content box, which flex-start would have shrunk to the
+       longest line. */
+    .sqfy-app .app-footer-slot{ width:100%; justify-content:center; }
+  }
+  /* Collapses to nothing when the host leaves it alone (both WordPress
+     builds), so it costs no gap there. */
+  .sqfy-app .app-footer-slot:empty{ display:none; }
+
+  @media (max-width: 900px){
+    .sqfy-app .app-header{ height:48px; padding:0 12px; gap:10px; }
+    /* Below this the logo alone carries identity; the tagline would take the
+       whole bar. */
+    .sqfy-app .brand-heading .sub{ display:none; }
+    .sqfy-app .app-footer{
+      gap:12px;
+      padding:11px 16px;
+    }
   }
   .sqfy-app .topbar-stats{
@@ -143 +322 @@
 
   /* ---------- layout ---------- */
+  /* THE DEFAULT IS NO RAIL, and that is not a style preference — it is the
+     state the app actually boots in (empty queue), so it has to be what the
+     stylesheet paints before any JavaScript has run. The rail is added by
+     .sqfy-has-rail further down.
+     It was the other way round until 2026-08-31, with a 310px default that
+     .sqfy-no-rail then collapsed, and the result was that every cold load
+     painted a rail and animated it away — the whole editor column sliding
+     310px left over 260ms, on a screen nobody had interacted with yet. A
+     class can only ever describe the exception; if it describes the common
+     case, the first paint is wrong by construction. */
   .sqfy-app .layout{
     flex:1;
     display:grid;
-    grid-template-columns:310px 1fr;
+    grid-template-columns:0 1fr;
     min-height:0;
   }
@@ -173 +362 @@
        height to fill and .stage (overflow:hidden) collapses toward 0 without a
        floor — give it one, and let #imgOriginal size off a safe viewport slice
-       instead of the desktop-tuned 440px chrome offset. */
-    .sqfy-app .stage{ min-height:280px; }
-    .sqfy-app #imgOriginal{ max-height:calc(50vh - var(--sqfy-vh-offset, 0px)); }
+       instead of the desktop-tuned 440px chrome offset.
+
+       A *fixed* height, not just a floor. Sizing the stage to whatever the
+       image happened to need meant a landscape photo got a 229px stage on a
+       664px viewport — 34% of the screen — and the Original/Optimized badges
+       (absolute, top:16px) then sat 80px deep into the picture instead of
+       over empty checkerboard. A standard 65%-of-screen stage gives them room
+       at any aspect ratio and stops the editor resizing under you as you
+       move between queue items.
+
+       svh over vh on purpose: iOS resolves vh against the LARGE viewport (the
+       one with the address bar hidden), so 65vh is meaningfully more of the
+       screen than intended. The vh line stays first as the fallback
+       for anything without svh.
+
+       Both selectors below are deliberately one step more specific than the
+       base rules they override. `.sqfy-app .stage` and `.sqfy-app #imgOriginal`
+       are declared much further down this file at the SAME specificity, so the
+       plain selectors that used to be here lost on source order and this whole
+       block was dead — which is why the stage was image-driven and the 280px
+       floor never took. */
+    .sqfy-app .stage-wrap > .stage{
+      /* flex:none first, or the height is ignored regardless: .stage is a
+         column-flex child of .stage-wrap, where the base `flex:1` means
+         flex-basis:0% — and flex-basis beats height on the main axis. */
+      flex:none;
+      height:calc(65vh - var(--sqfy-vh-offset, 0px));
+      height:calc(65svh - var(--sqfy-vh-offset, 0px));
+      min-height:280px;
+    }
+    /* Viewport units rather than a percentage of the stage: the grid track
+       inside .stage-inner is content-sized, so a percentage max-height here
+       has no definite height to resolve against. The 32px keeps a 16px margin
+       top and bottom so the image never butts against the stage edge. */
+    .sqfy-app .stage #imgOriginal{
+      max-height:calc(65vh - var(--sqfy-vh-offset, 0px) - 32px);
+      max-height:calc(65svh - var(--sqfy-vh-offset, 0px) - 32px);
+    }
+
+    /* Last 28px of the badge overlap the taller stage didn't absorb. The image
+       is near full-bleed horizontally at this width, so there is no sideways
+       room to win — it has to come out of the badges' own height. Trimmed to
+       land just above where #imgOriginal's max-height now starts it.
+       (Same specificity trap as the stage rules: the base .stage-badge rules
+       are declared later in this file, so these need the extra step.) */
+    .sqfy-app .stage > .stage-badge{ top:10px; padding:7px 10px; }
+    .sqfy-app .stage > .stage-badge .value{ font-size:0.85rem; }
+
+    /* Crop toolbar: the specificity fix above gets the inputs back to 54px,
+       which alone drops this from five rows to two. These trim the rest —
+       every px of toolbar is a px of image the user can't see while framing
+       a crop. */
+    .sqfy-app .sqfy-crop-toolbar{
+      gap:6px;
+      padding:6px 8px;
+      bottom:8px;
+      max-width:calc(100% - 8px);
+    }
+    .sqfy-app .sqfy-crop-toolbar .btn{ padding:5px 11px; }
+    .sqfy-app .sqfy-crop-aspect{ padding:4px 8px; }
+    /* 16px is a functional floor, not a style choice: iOS Safari zooms the
+       whole page in when you focus an input smaller than that, and it does
+       not zoom back out. Width stays tight so the row still fits — the
+       larger type just fills the box it already had. */
+    .sqfy-app .sqfy-crop-size input[type="number"]{ font-size:16px; width:58px; }
+    /* Both separators flanking "Apply to all" survive the wrap as stray
+       vertical ticks at the start or end of a row. They earn their place on
+       one desktop row; here they just add noise and 3px each. */
+    .sqfy-app .sqfy-crop-sep{ display:none; }
     /* Download / Next file / Apply to all — stack full-width instead of the
        desktop's hug-content row, which left them small and left-aligned. */
@@ -204 +459 @@
     transition:border-color .15s ease, background .15s ease;
   }
+  /* `display:flex` above outranks the UA's [hidden] rule, and app.js hides
+     the rail's copy outright once the grid is offering intake instead. */
+  .sqfy-app .dropzone[hidden]{ display:none; }
   .sqfy-app .dropzone .dz-icon{ color:var(--text-faint); transition:color .15s ease; }
   .sqfy-app .dropzone.drag{
@@ -290 +548 @@
   /* The OS default scrollbar renders as a bright light-grey slab against this
      dark UI — loud enough that it reads as a component rather than chrome.
-     Both lists that can overflow get the same quiet treatment: the rail, and
+     Every surface that can overflow gets the same quiet treatment: the rail,
+     the batch grid (the rail's own contents in the other mode — a different
+     scrollbar there would say the two modes are different applications),
      rename's manual list (which is a list of queue rows, so a different
-     scrollbar there would look like a different kind of surface).
+     scrollbar there would look like a different kind of surface), and the
+     changelog modal's history (src/upsell/whats-new.css), which is the one
+     that scrolls on a dialog rather than in the layout — all the more
+     reason it can't be the loudest thing in the box.
+
+     One selector list rather than a copy per stylesheet: "quiet scrollbar"
+     is one decision, and three copies of it drift the moment the token
+     changes.
+
+     .sqfy-scroll is the opt-in version of the same thing, for surfaces core
+     cannot name: Pro's preset list is the first taker. It lives HERE rather
+     than being copied into pro.css because a second copy is a second thing to
+     forget when this changes, and a class name in a selector list costs a free
+     build nothing.
 
      Declared twice on purpose, not redundantly: scrollbar-color is the
@@ -299 +572 @@
      which is why the widths agree. */
   .sqfy-app .queue-list,
-  .sqfy-app .sqfy-rename-list{
+  .sqfy-app .batch-grid,
+  .sqfy-app .sqfy-scroll,
+  .sqfy-app .sqfy-rename-list,
+  .sqfy-app .sqfy-changelog-scroll{
     scrollbar-width:thin;
     scrollbar-color:var(--border-hover) transparent;
   }
   .sqfy-app .queue-list::-webkit-scrollbar,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar{
+  .sqfy-app .batch-grid::-webkit-scrollbar,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar{
     width:8px;
     height:8px;
   }
   .sqfy-app .queue-list::-webkit-scrollbar-track,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-track{
+  .sqfy-app .batch-grid::-webkit-scrollbar-track,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar-track,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-track,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar-track{
     background:transparent;
   }
   .sqfy-app .queue-list::-webkit-scrollbar-thumb,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-thumb{
+  .sqfy-app .batch-grid::-webkit-scrollbar-thumb,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar-thumb,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-thumb,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar-thumb{
     background:var(--border-hover);
     border-radius:var(--radius-pill);
@@ -322 +607 @@
   }
   .sqfy-app .queue-list::-webkit-scrollbar-thumb:hover,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-thumb:hover{
+  .sqfy-app .batch-grid::-webkit-scrollbar-thumb:hover,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar-thumb:hover,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-thumb:hover,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar-thumb:hover{
     background:var(--text-faint);
     background-clip:content-box;
@@ -330 +618 @@
      mobile rail, which scrolls horizontally. */
   .sqfy-app .queue-list::-webkit-scrollbar-corner,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-corner{
+  .sqfy-app .batch-grid::-webkit-scrollbar-corner,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar-corner,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-corner,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar-corner{
     background:transparent;
   }
@@ -358 +649 @@
     margin:auto;
   }
+  /* ONE copy now, in the footer (#52). It used to render twice — the rail's
+     bottom corner plus a `.privacy-note-mobile` twin at the end of .layout,
+     with a display:none dance keeping the text out of the accessibility tree
+     twice, and an explicit `order` so the twin didn't float to the top of the
+     mobile stack. A footer that is a sibling of .layout is past .editor-panel
+     at every breakpoint, so all of that goes. */
   .sqfy-app .privacy-note{
     flex:none;
     display:flex;
     gap:9px;
-    padding:14px 16px;
-    border-top:1px solid var(--border);
     color:var(--text-dim);
     font-size:0.78rem;
     line-height:1.55;
+    min-width:0;
   }
   .sqfy-app .privacy-note .privacy-icon{
@@ -420 +716 @@
     border:1px solid var(--border);
   }
-  .sqfy-app .qitem .done-badge{
+  /* Every badge below is scoped to BOTH views. buildThumbWrap is one builder
+     (src/core/app.js) and this is one stylesheet for what it produces, so the
+     rail and batch mode's tiles cannot drift — the difference between them is
+     the thumb's fit and the tile's own layout, nothing else. Broadened for
+     #51; the offsets stay shared too, because the badges hang off the corners
+     of .thumb-wrap and that is true at 48px and at 200px alike. */
+  .sqfy-app :is(.qitem, .batch-tile) .done-badge{
     position:absolute; bottom:-4px; right:-4px;
     width:19px; height:19px;
@@ -431 +733 @@
     color:#07240f;
   }
+  /* .qitem ONLY. The grid deliberately carries no done state — see renderGrid
+     in app.js for the argument; the short version is that `done` is a checklist
+     mark and the grid is not a checklist. */
   .sqfy-app .qitem.done .done-badge{ display:flex; }
   /* Stale: finalized, but a later batch-wide edit moved its pixels, so its
@@ -451 +756 @@
     color:#3a2401;
   }
-  .sqfy-app .qitem .resize-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .resize-badge{
     position:absolute; top:-4px; left:-4px;
     width:17px; height:17px;
@@ -484 +789 @@
      isn't in a free bundle either, so the selector simply never matches
      and rename compacts up as if crop were absent — which it is. */
-  .sqfy-app .qitem .sqfy-rename-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .sqfy-rename-badge{
     position:absolute; top:34px; left:-4px;
     width:17px; height:17px;
@@ -495 +800 @@
     color:#fff;
   }
-  .sqfy-app .qitem .thumb-wrap:not(:has(.resize-badge)) .sqfy-rename-badge,
-  .sqfy-app .qitem .thumb-wrap:not(:has(.sqfy-crop-badge)) .sqfy-rename-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .thumb-wrap:not(:has(.resize-badge)) .sqfy-rename-badge,
+  .sqfy-app :is(.qitem, .batch-tile) .thumb-wrap:not(:has(.sqfy-crop-badge)) .sqfy-rename-badge{
     top:15px;
   }
-  .sqfy-app .qitem .thumb-wrap:not(:has(.resize-badge)):not(:has(.sqfy-crop-badge)) .sqfy-rename-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .thumb-wrap:not(:has(.resize-badge)):not(:has(.sqfy-crop-badge)) .sqfy-rename-badge{
     top:-4px;
   }
@@ -581 +886 @@
   .sqfy-app .sqfy-rename-seq-row{ display:flex; gap:12px; }
   .sqfy-app .sqfy-rename-seq-row .control{ flex:1; }
-  /* Native number spinners render as a pale grey slab on hover — the same
-     thing crop's size fields already strip (pro.css). Removed here for the
-     same reason, and because the two values behind them are typed far more
-     often than stepped: Start at is almost always 1, and Digits is
-     auto-computed from the queue and only overridden deliberately. */
+  /* Tabular figures so Start at and Digits don't shift width as they change.
+     The spinner-stripping that used to live here is now app-wide — see
+     input[type="number"] further down. */
   .sqfy-app .sqfy-rename-seq-row input[type="number"]{
-    -moz-appearance:textfield;
-    appearance:textfield;
     font-variant-numeric:tabular-nums;
-  }
-  .sqfy-app .sqfy-rename-seq-row input[type="number"]::-webkit-outer-spin-button,
-  .sqfy-app .sqfy-rename-seq-row input[type="number"]::-webkit-inner-spin-button{
-    -webkit-appearance:none;
-    margin:0;
   }
 
@@ -674 +970 @@
      the reason rename's block above moved on 2026-08-07: pro.css is loaded
      only by Pro bundles, so free users would otherwise get a fully working
-     but completely unstyled Crop. See docs/features/active/tier-reset-spec.md. */
+     but completely unstyled Crop. See docs/features/archive/tier-reset-spec.md. */
 
   /* ===== Crop mode (see docs/crop-spec.md) ===== */
@@ -701 +997 @@
      (resize sits at top:-4). When crop is the only badge, it takes resize's
      corner spot so a lone badge never floats mid-edge. */
-  .sqfy-app .qitem .sqfy-crop-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .sqfy-crop-badge{
     position:absolute; top:15px; left:-4px;
     width:17px; height:17px;
@@ -712 +1008 @@
     color:#fff;
   }
-  .sqfy-app .qitem .thumb-wrap:not(:has(.resize-badge)) .sqfy-crop-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .thumb-wrap:not(:has(.resize-badge)) .sqfy-crop-badge{
     top:-4px;
   }
@@ -831 +1127 @@
     font-variant-numeric:tabular-nums;
   }
-  .sqfy-app .sqfy-crop-size input{
+  /* [type="number"] is load-bearing, not decoration: the generic
+     `.sqfy-app input[type="number"]` rule further down this file scores an
+     identical (0,2,1) to a bare `.sqfy-crop-size input`, so source order was
+     handing these inputs the app's standard 150px-wide, 11px-padded form
+     field. Two of those plus the × and the lock is ~330px, which is what wrapped
+     the toolbar onto five rows and buried the image on a phone. */
+  .sqfy-app .sqfy-crop-size input[type="number"]{
     width:54px;
     padding:5px 7px;
@@ -1045 +1347 @@
   }
 
+  /* The empty state carries one more block than it used to (#52): every host
+     now gets the dropzone, because the rail that used to hold one isn't here.
+     So the vertical budget is tighter — gap comes down from 5vw and the
+     bottom padding no longer reserves room for an absolutely-pinned tip that
+     is now in normal flow with everything else. */
+  /* The empty state's backdrop. TWO LAYERS IN ONE PROPERTY, deliberately,
+     rather than an ::before overlay: a positioned pseudo-element with a
+     z-index paints above the in-flow children it is supposed to sit behind,
+     and fixing that means giving the hero, the dropzone and the steps their
+     own stacking context each. A background can't have that problem.
+     The scrim is not optional. Everything on this screen is text on top of
+     the image — the title, the three steps, the tip — and it is the one
+     screen whose job is to be read. The gradient guarantees the contrast
+     whatever the photo does, so the image can be chosen for how it looks
+     rather than for how dark it is.
+     AVIF degrades correctly: a browser that cannot decode it (Safari before
+     16.4) drops the image layer and keeps the gradient, which is the flat
+     ground this screen had before. Nothing to detect, no fallback file.
+     background-attachment stays at its default `scroll`, which on a scroll
+     container means the image holds still while the content moves over it —
+     `local` would drag it along and read as a parallax nobody asked for. */
   .sqfy-app .empty-state{
     position:relative;
@@ -1052 +1375 @@
     justify-content:center;
     flex-direction:column;
-    gap:5vw;
+    gap:clamp(20px, 2.6vw, 44px);
     text-align:center;
-    padding:2.5vw 2.5vw 10vw 2.5vw;
+    padding:2.5vw;
+    overflow-y:auto;
+  }
+  /* HOSTS THAT OWN THE WHOLE PAGE ONLY. Keyed on the app header, which exists
+     if and only if the host passed config.brandHTML — and both WordPress
+     builds pass none, because their own overlay already has a header. That
+     makes this exactly the right question to ask: a full-bleed photo is
+     scene-setting for a site you arrived at, and inside a wp-admin modal it
+     would be decoration on someone else's screen. WordPress keeps the flat
+     ground (Xavier, 2026-08-31). */
+  .sqfy-app:has(.app-header) .empty-state{
+    /* SHAPED TO THE MEASUREMENTS, not to taste. Every line was sampled
+       against its worst-case (brightest) pixel across nine viewports from
+       375×812 to 2560×1440. The finding that set the shape: the scrim is
+       only needed at the TOP, and it is gone by 47% where the artwork is at
+       its best. The bottom third needs nothing — the image is near-black
+       there and the steps measure 16:1 untouched.
+       THE NUMBER IS SET BY THE WORST CROP, NOT THE TYPICAL ONE. `cover`
+       reframes the sky as the aspect changes: at 1440 the hero sits over
+       mid-picture, and at 2560 the same words sit over the top of the image,
+       which is its brightest region. A stop that measured comfortably at
+       1440 failed outright at 2560. */
+    background-image:
+      linear-gradient(180deg,
+        rgba(13,14,19,0.42) 0%,
+        rgba(13,14,19,0.38) 21%,
+        rgba(13,14,19,0.16) 34%,
+        rgba(13,14,19,0.00) 47%,
+        rgba(13,14,19,0.00) 100%),
+      url('./assets/empty-bg-rQTXw-s9.avif');
+    background-size:cover;
+    background-position:center;
+    background-repeat:no-repeat;
+  }
+  /* AND THE TYPE COMES UP TO MEET IT. --text-dim and --text-faint were tuned
+     against a flat surface, where a step down from white reads as hierarchy;
+     over a photograph the same step reads as low contrast, which is a
+     different thing entirely. So on this host the second line, the browse
+     hint and the drop icon go white and the dashed border goes to a white
+     alpha — the hierarchy moves into SIZE and WEIGHT, which a busy backdrop
+     cannot eat. Scoped to the empty state so the rail's own dropzone, which
+     still sits on a flat panel, keeps the original ramp. */
+  /* THE HEADLINE IS A LIGHTENED ORANGE ON THIS HOST, and the specific value
+     is a contrast decision rather than a style one. A colour's luminance caps
+     what it can ever reach, before any background gets a say: over pure black
+     the old purple #8b5cf6 tops out at 4.96:1 and --orange #ff7a45 at 8.12:1.
+     Over the bright top of this artwork at a 2560-wide crop that left purple
+     at 1.90:1 and --orange at 2.91:1 against the 3:1 large-text floor — and
+     --orange barely moved when the scrim was raised (2.84 → 2.91 for four
+     more points of alpha). Past a point you are darkening a photograph to
+     rescue a colour that has already spent its budget.
+     #ffad80 is --orange with the luminance raised from 0.36 to 0.53, which
+     measures 3.57:1 on that worst crop and 7.7:1 on a laptop — the brand
+     temperature kept, the ceiling raised, and the scrim left at 0.42 instead
+     of being pushed to 0.54 to compensate. Deliberately NOT --orange itself:
+     the token is the app's accent on flat dark panels, where it has all the
+     contrast it needs, and it should not be re-tuned for one photograph. */
+  .sqfy-app:has(.app-header) .empty-state .empty-title{ color:#ffad80; }
+  .sqfy-app:has(.app-header) .empty-state .empty-sub{ color:#fff; }
+  /* The step captions go with them, and this one was found by measuring
+     rather than by looking: on a phone the empty state is content-height and
+     scrolls, so the three steps sit in the MIDDLE of the artwork instead of
+     at its near-black foot. --text-dim measured 1.81:1 there against 5.89:1
+     on a desktop crop — the same colour, the same rule, a completely
+     different background under it. White holds at every height. */
+  .sqfy-app:has(.app-header) .empty-step p{ color:#fff; }
+  .sqfy-app:has(.app-header) .empty-drop .dz-sub{ color:#fff; }
+  .sqfy-app:has(.app-header) .empty-drop .dz-icon{ color:#fff; }
+  /* MOBILE KEEPS A FLOOR ALL THE WAY DOWN. On a phone the empty state is
+     content-height and scrolls, so `cover` on a narrow tall box shows a
+     vertical slice of the artwork and the content sits ON that slice rather
+     than on the composition the image was cropped for — the three steps land
+     across the bright middle instead of the near-black foot. Measured: the
+     step heading fell to 3.94:1 there while reading 16:1 on every desktop
+     crop. A gentle scrim from the midpoint down fixes it, and costs less here
+     than anywhere else precisely because a narrow crop is showing so little
+     of the picture to begin with. */
+  @media (max-width: 900px){
+    .sqfy-app:has(.app-header) .empty-state{
+      background-image:
+        linear-gradient(180deg,
+          rgba(13,14,19,0.50) 0%,
+          rgba(13,14,19,0.46) 18%,
+          rgba(13,14,19,0.24) 34%,
+          rgba(13,14,19,0.20) 55%,
+          rgba(13,14,19,0.22) 100%),
+        url('./assets/empty-bg-rQTXw-s9.avif');
+    }
+  }
+
+  /* THE DROPZONE CARRIES ITS OWN, and this is the one place the page-wide
+     gradient could not help. It sits at 38–42% of the height, which is
+     exactly the horizon — the brightest band in the artwork (luminance 0.23
+     against 0.01 at the foot of the page). Darkening the middle enough to fix
+     it would have meant darkening the middle, which is the half of the image
+     worth showing. A translucent panel inside the dashed border solves it
+     where it happens, and reads as what it is: a surface you are about to
+     drop something onto. Measured 3.47:1 → 5.5:1. */
+  .sqfy-app:has(.app-header) .empty-drop .dropzone{
+    background:rgba(13,14,19,0.22);
+    border-color:rgba(255,255,255,0.38);
+  }
+  .sqfy-app:has(.app-header) .empty-drop .dropzone:hover{ border-color:rgba(255,255,255,0.62); }
+  /* Restated because the selector above outranks .dropzone.drag, which would
+     otherwise lose its highlight on this host alone. */
+  .sqfy-app:has(.app-header) .empty-drop .dropzone.drag{
+    border-color:var(--purple);
+    background:rgba(139,92,246,0.16);
   }
   /* Corner container for empty-state chrome (see template.js). Children
@@ -1142 +1572 @@
   .sqfy-app .empty-step:nth-child(2) .empty-step-num,
   .sqfy-app .empty-step:nth-child(3) .empty-step-num{ color:var(--purple); }
+  /* Down 15% from 150x96 (#52, Xavier). The empty state gained a dropzone —
+     every host has one now that the rail isn't there to carry it — and the
+     art is the block that can give up room without losing its job: it is
+     decoration for a step whose heading and sentence carry the meaning,
+     while the dropzone is the one thing on this screen you are meant to act
+     on. Both dimensions scale together so the SVGs keep their aspect. */
   .sqfy-app .empty-step-art{
     width:100%;
-    max-width:150px;
-    height:96px;
+    max-width:128px;
+    height:82px;
     object-fit:contain;
   }
@@ -1160 +1596 @@
     line-height:1.5;
   }
+  /* In normal flow at every width as of #52. It was absolutely pinned to
+     bottom:10% with a mobile exception putting it back in flow, and the extra
+     dropzone block above pushed the steps straight through it — the exception
+     had already worked out what the rule should be. */
   .sqfy-app .empty-tip{
-    position:absolute;
-    left:50%;
-    bottom:10%;
-    transform:translateX(-50%);
+    margin:0 auto;
     display:flex;
     align-items:center;
@@ -1172 +1609 @@
     width:420px;
     max-width:calc(100% - 5vw);
+    /* Tall enough for the longest tip in the rotation. The tips swap in place
+       on a timer, so a three-line one growing the box would push the whole
+       empty state up under a reader who is not looking at the tip at all. */
+    min-height:100px;
     text-align:left;
     padding:12px 16px;
@@ -1177 +1618 @@
     border-radius:12px;
     background:var(--surface-2);
-  }
-  /* Mobile: .empty-state is content-sized (page scrolls), so an absolute
-     bottom-pinned tip lands on top of the steps — put it in flow instead. */
-  @media (max-width: 900px){
-    .sqfy-app .empty-tip{
-      position:static;
-      transform:none;
-      margin:0 auto;
-    }
   }
   .sqfy-app .empty-tip svg{ flex:none; width:20px; height:20px; color:var(--purple); }
@@ -1298 +1730 @@
   .sqfy-app.sqfy-noqueue .queue-panel{ display:none; }
   .sqfy-app.sqfy-noqueue .layout{ grid-template-columns:1fr; }
-  /* The empty state's fallback dropzone — rendered only in this layout, where
-     it's the sole intake control, so it reads as the primary affordance
-     rather than the rail's quiet corner version. */
+  /* The empty state's dropzone. Rendered on every host as of #52, where it
+     used to be `hideQueue` only — the empty state has no rail now, so this
+     IS the intake, and it reads as the primary affordance rather than the
+     rail's quiet corner version. */
   .sqfy-app .empty-drop{ width:min(420px, 100%); }
   .sqfy-app .empty-drop .dropzone{ margin:0; padding:32px 20px; }
@@ -1321 +1754 @@
      branch; no logic changes needed. (Pro's equivalents: pro.css.) */
   .sqfy-app.sqfy-single .resize-applyall-row{ display:none; }
-  .sqfy-app.sqfy-single #applyAllRow{ display:none; }
+  /* Same UA-override reason as .action-group .btn[hidden] below: the row
+     is display:flex, so openResizeModal's hidden attribute needs help. */
+  .sqfy-app .resize-applyall-row[hidden]{ display:none; }
+  /* #applyAllRow retired 2026-08-30 — the controls bar's apply-to-all is a
+     button (#processAllBtn) that renderQueue hides on any queue of one, so
+     a single-image host needs no rule of its own here. */
   /* Rename's own apply-to-all affordance is no longer a checkbox to hide:
      v2 replaced it with the mode switcher, which rename.js hides directly
@@ -1513 +1951 @@
     grid-area:1 / 1;
     user-select:none;
+    /* pointer-events:none keeps these out of the way of the compare drag, but
+       it does NOT stop iOS's long-press-on-an-image sheet ("Save Image", "Copy")
+       — that runs off its own hit test. -webkit-touch-callout is what suppresses
+       it, and it matters here because the compare handle sits right on top of
+       the photo, so every slow drag is also a long press on an image. */
+    -webkit-touch-callout:none;
+    -webkit-user-select:none;
     pointer-events:none;
     max-width:none;
@@ -1518 +1963 @@
   .sqfy-app #imgOriginal{
     max-width:100%;
-    /* 340px is the viewport budget for the app's own chrome (heading, controls,
-       paddings), tuned on the standalone web page. --sqfy-vh-offset is any
-       EXTRA chrome a host shell adds around the app — the WP overlay sets it
-       to its header height. Without it, imgOriginal is allowed to be taller
-       than the stage, overflowing the grid cell that imgPreview (inset:0)
-       stretches to — which visibly misaligns the before/after comparison. */
-    max-height:calc(100vh - 340px - var(--sqfy-vh-offset, 0px));
+    /* Without this, imgOriginal is allowed to be taller than the stage,
+       overflowing the grid cell that imgPreview (inset:0) stretches to —
+       which visibly misaligns the before/after comparison. See
+       --sqfy-app-chrome at the top of this file for what the budget covers. */
+    max-height:calc(100vh - var(--sqfy-app-chrome) - var(--sqfy-vh-offset, 0px));
     min-height:160px;
   }
@@ -1564 +2007 @@
     box-shadow:0 2px 10px rgba(0,0,0,.4);
   }
+  /* This range input is pure input surface: every pixel the user actually
+     sees is drawn by .divider-line and .loupe-grip, positioned from its value
+     by updateRevealPosition(). It used to be hidden by making each part
+     transparent, which relies on `appearance:none` fully suppressing the
+     platform control — and mobile Safari does not honour that on the thumb.
+     A test user's phone rendered the 50px full-height thumb with its native
+     fill still on, so its two edges showed up flanking the purple divider as
+     the "three vertical lines" in the compare view (reported 2026-08-29).
+
+     opacity:0 settles it at a level no UA stylesheet can reach into: an
+     opacity:0 element still hit-tests and still receives pointer/touch events
+     (unlike visibility:hidden), so dragging is untouched, and the input stays
+     in the accessibility tree with its aria-label. The transparent
+     backgrounds below stay as well — belt and braces, and they keep the
+     element honest if the opacity is ever lifted for debugging. */
   .sqfy-app .reveal-range{
     position:absolute;
@@ -1572 +2030 @@
     appearance:none;
     background:transparent;
+    opacity:0;
     cursor:ew-resize;
-  }
-  .sqfy-app .reveal-range::-webkit-slider-runnable-track{ background:transparent; height:100%; }
-  .sqfy-app .reveal-range::-moz-range-track{ background:transparent; height:100%; }
+    /* pan-y, not none: a vertical swipe still scrolls the page (the mobile
+       layout scrolls, and the stage is a big chunk of it), but horizontal
+       movement is handed straight to this control instead of being held back
+       while the browser decides whether it was meant to be a scroll. Without
+       it the first few px of every drag are arbitration lag.
+       The callout/select/highlight suppressions are what stop a slow drag
+       turning into iOS's text-selection magnifier and share sheet. */
+    touch-action:pan-y;
+    -webkit-touch-callout:none;
+    -webkit-user-select:none;
+    user-select:none;
+    -webkit-tap-highlight-color:transparent;
+  }
+  .sqfy-app .reveal-range::-webkit-slider-runnable-track{ background:transparent; border:none; height:100%; }
+  .sqfy-app .reveal-range::-moz-range-track{ background:transparent; border:none; height:100%; }
+  /* 50px deliberately — it matches .loupe-grip so the thumb sits exactly under
+     the handle the user can see. Do not shrink it to buy positional accuracy:
+     the thumb IS the touch grab target. WebKit only enters drag mode when the
+     touch lands on the thumb; anywhere else on the track it sets the value and
+     stops, so the swipe that follows falls through to iOS's scroll/long-press
+     arbitration and the bar only moves if you press and hold (which then
+     summons the callout and magnifier instead). Tried 1px on 2026-08-29,
+     which is exactly what happened.
+
+     It does cost a little travel — a range maps pointer position across
+     `track width - thumb width`, so the value can't quite reach 0/100 from a
+     tap near either end. That only affects taps; a drag tracks the finger 1:1
+     from wherever it was grabbed. */
   .sqfy-app .reveal-range::-webkit-slider-thumb{
     -webkit-appearance:none;
+    appearance:none;
     width:50px; height:100%;
     background:transparent;
+    border:none;
+    box-shadow:none;
   }
   .sqfy-app .reveal-range::-moz-range-thumb{
@@ -1585 +2072 @@
     background:transparent;
     border:none;
+    box-shadow:none;
   }
 
@@ -1734 +2222 @@
   }
   .sqfy-app input[type="number"]{ width:150px; }
+  /* NO SPINNERS, ANYWHERE (Xavier, 2026-09-01). The native stepper is a pair
+     of 8px chevrons drawn in the platform's own light chrome, which on this
+     dark surface reads as a bright artefact stuck to the field — and it earns
+     nothing: every number here is typed rather than stepped, since a max width
+     is a decision (1600, not 1599 then 1600) and Start at is almost always 1.
+     Was scoped to rename's sequence row, which is only where it got NOTICED
+     first; the argument was never specific to that field. */
+  .sqfy-app input[type="number"]{
+    -moz-appearance:textfield;
+    appearance:textfield;
+  }
+  .sqfy-app input[type="number"]::-webkit-outer-spin-button,
+  .sqfy-app input[type="number"]::-webkit-inner-spin-button{
+    -webkit-appearance:none;
+    margin:0;
+  }
 
   .sqfy-app #formatControlWrap{ flex:1; min-width:200px; }
@@ -1775 +2279 @@
   .sqfy-app .spacer{ flex:1; }
   .sqfy-app .action-group{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
-  /* Apply-to-all leads the group so it reads as a modifier on what follows
-     rather than a third button. No margin trickery to separate it:
-     .action-group is content-width (it sits after .spacer's flex:1, and
-     wraps to its own row on narrow editors), so there is never free space
-     to push into — the gap alone carries the grouping. */
-  /* .checkbox-row sets display:flex, which beats the hidden attribute's UA
-     display:none — without this the row stays visible after renderQueue()
-     hides it on the last pending item. */
-  .sqfy-app .action-group .applyall-row[hidden]{ display:none; }
-
+  /* The group is [item action] [Next file] [Process all], left to right, in
+     rising commitment. No margin trickery separates them: .action-group is
+     content-width (it sits after .spacer's flex:1, and wraps to its own row
+     on narrow editors), so there is never free space to push into — the gap
+     alone carries the grouping. Every member is hidden by renderQueue via the
+     hidden attribute, and .btn sets display:inline-flex, which beats the
+     attribute's UA display:none — hence the rule below. */
+  .sqfy-app .action-group .btn[hidden]{ display:none; }
+
+  /* ON THE STAGE, BOTTOM LEFT. It carries two messages — a first-use codec
+     load and a worker crash — and both are rare and transient. As a row in
+     the editor column that left two bad options: reserve a blank line for the
+     whole session, or move the controls under the user's cursor the moment it
+     arrived. Floating over the stage it costs nothing and shifts nothing.
+     Same glass as the two stage badges above it, because it is the same kind
+     of thing — a note about the picture, drawn on the picture. pointer-events
+     off for the same reason they are: the whole stage is the loupe's drag
+     surface and nothing overlaid on it may take a drag. */
   .sqfy-app .codec-status-line{
-    font-size:0.8rem;
-    color:var(--text-faint);
-    min-height:17px;
-  }
+    position:absolute;
+    left:16px;
+    bottom:16px;
+    z-index:2;
+    max-width:calc(100% - 32px);
+    padding:7px 12px;
+    border-radius:var(--radius-sm);
+    background:rgba(13,14,19,0.72);
+    backdrop-filter:blur(6px);
+    -webkit-backdrop-filter:blur(6px);
+    border:1px solid var(--border);
+    font-size:0.78rem;
+    color:var(--text-dim);
+    pointer-events:none;
+  }
+  .sqfy-app .codec-status-line:empty{ display:none; }
 
   .sqfy-app .toast{
@@ -1817 +2341 @@
      over the image behind it. */
   .sqfy-app .center-toast{
-    position:fixed;
+    /* Absolute inside .editor-panel — see the note on .notice-toast below for
+       why both of these stopped guessing at the rail's width. */
+    position:absolute;
     top:50%; left:50%;
     transform:translate(-50%,-50%) scale(0.96);
@@ -1823 +2349 @@
     align-items:center;
     gap:12px;
-    max-width:min(460px, calc(100vw - 40px));
+    max-width:min(460px, calc(100% - 40px));
     padding:16px 22px;
     background:var(--surface-3);
@@ -1851 +2377 @@
     transform:translate(-50%,-50%) scale(1);
   }
-  /* Centered over the EDITOR column, not the page — page-centering reads
-     as misaligned next to the 310px queue column. Below 900px the layout
-     is single-column, so plain page-centering is correct there. Same
-     treatment as .notice-toast above. */
-  @media (min-width: 901px){
-    .sqfy-app .center-toast{ left:calc(50% + 155px); }
-  }
   /* Modal already on screen (the zip download fires from inside the
      finalize modal, every time) — sit at the top of the editor instead of
@@ -1894 +2413 @@
   /* centered notice card (working-size cap) — bigger moment than the pill */
   .sqfy-app .notice-toast{
-    position:fixed;
+    /* ABSOLUTE INSIDE .editor-panel, not fixed to the viewport (#52, spec
+       §2.5). Both centred alerts used to sit at `left: calc(50% + 155px)` —
+       hardcoded half the 310px rail — which was correct only while the rail
+       was a constant. #51 made it a variable and the notice ended up 155px
+       right of the editor's real centre in batch mode (measured).
+       The fix is not a better constant, it is not having one: centred on the
+       element, this is right whether the rail is up, sliding, or gone.
+       .editor-panel is already position:relative for .intake-loading's
+       curtain, and position:relative with no z-index creates no stacking
+       context, so the z-index ordering below is unchanged by the move. */
+    position:absolute;
     top:50%; left:50%;
     transform:translate(-50%,-50%);
     width:400px;
-    max-width:calc(100vw - 40px);
+    max-width:calc(100% - 40px);
     background:var(--surface-3);
     border:1px solid var(--border-hover);
@@ -1926 +2455 @@
     visibility:visible;
     pointer-events:auto;
-  }
-  /* Center over the EDITOR column, not the page — page-centering reads as
-     misaligned next to the 310px queue column. Below the 900px breakpoint
-     the layout is single-column, so plain page-centering is correct there. */
-  @media (min-width: 901px){
-    .sqfy-app .notice-toast{ left:calc(50% + 155px); }
   }
   .sqfy-app .notice-title{
@@ -2137 +2660 @@
     font-weight:600;
   }
+
+  /* ---------- shared batch fields (src/core/batch-panel.js) ---------- */
+  /* Used by BOTH bulk mode's settings panel and Quick Process's widget, which
+     is the whole reason these live in core rather than beside either one.
+     Everything else the fields need — .control, .quality-slider, .select-wrap
+     — they already inherit from the editor's own controls, so the form looks
+     like the app instead of like a form. */
+  .sqfy-app .batch-size-row,
+  .sqfy-app .batch-rename-row{
+    display:flex;
+    align-items:flex-end;
+    gap:8px;
+  }
+  .sqfy-app .batch-size-row input[type="number"],
+  .sqfy-app .batch-rename-row input[type="text"]{ flex:1; min-width:0; }
+  .sqfy-app .batch-size-row .select-wrap{ flex:none; width:74px; }
+  /* Start / Digits. Deliberately smaller and quieter than the prefix beside
+     them: the prefix is the decision, these two are adjustments to it. */
+  .sqfy-app .batch-subfield{
+    display:flex;
+    flex-direction:column;
+    gap:5px;
+    flex:none;
+    font-size:0.68rem;
+    letter-spacing:0.05em;
+    text-transform:uppercase;
+    color:var(--text-faint);
+    font-weight:700;
+  }
+  .sqfy-app .batch-subfield input{ width:64px; }
+  /* Live preview of what a rename sequence produces. Only appears once there
+     is something to show, so an untouched form keeps its height. */
+  .sqfy-app .sqfy-bf-hint{
+    margin:6px 0 0;
+    /* Always reserves its line (the text is toggled with visibility, not
+       hidden), so typing a prefix doesn't grow the panel under the cursor. */
+    min-height:1.2em;
+    font-size:0.75rem;
+    color:var(--text-dim);
+    font-family:var(--mono);
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  /* ---------- batch mode (roadmap #51) ---------- */
+  /* THE RAIL SLIDE. grid-template-columns is animatable, so the collapse is
+     one transition on the existing track rather than a transform — which
+     would leave the editor panel's width lying about itself for the length of
+     the animation and make the grid reflow at the end.
+     Deliberately NOT folded into .sqfy-noqueue below: that one is a boot-time
+     layout for hideQueue hosts and must stay instant, and a host that has no
+     rail must never acquire one it can then slide.
+     The argument for sliding it at all (spec §3.1, Xavier's call): the brand
+     lockup and the privacy note are PRE-ENGAGEMENT material. Someone who has
+     queued twelve images is past the point where "nothing gets uploaded" is
+     doing persuasive work and exactly at the point where horizontal room for
+     thumbnails is worth the most. The empty state — what an unconvinced
+     visitor actually sees — keeps every word of it. */
+  /* THE RAIL BELONGS TO ONE IMAGE (#52, app-shell-spec.md §2.1).
+     `sqfy-has-rail` is set by app.js only while you ARE looking at a single
+     image — queue non-empty, mode editor. The empty state and batch mode both
+     go without, so empty → grid moves nothing at all and empty → one image
+     slides it in once, when it is earned.
+     Deliberately NOT folded into .sqfy-noqueue: that one is a boot-time
+     layout for hideQueue hosts and must stay instant, and a host that has no
+     rail must never acquire one it can then slide.
+     Desktop only, and that is not a detail: below 900px .layout is already a
+     single column with the rail stacked ABOVE the editor, so there is no
+     column to collapse. */
+  @media (min-width: 901px){
+    .sqfy-app .layout{ transition:grid-template-columns .26s cubic-bezier(.4,0,.2,1); }
+    .sqfy-app.sqfy-has-rail .layout{ grid-template-columns:310px 1fr; }
+    .sqfy-app:not(.sqfy-has-rail) .queue-panel{
+      opacity:0;
+      pointer-events:none;
+      /* A zero-width grid track still lets its content spill unless it
+         clips. */
+      overflow:hidden;
+    }
+    .sqfy-app .queue-panel{ transition:opacity .16s ease; }
+    @media (prefers-reduced-motion: reduce){
+      .sqfy-app .layout,
+      .sqfy-app .queue-panel{ transition:none; }
+    }
+  }
+  /* NOTHING ANIMATES UNTIL THE APP HAS MOUNTED AND PAINTED ONCE (app.js adds
+     and then drops .sqfy-booting). Correct defaults are what stop a cold load
+     needing a correction at all; this stops any OTHER boot-time state — a Pro
+     session restored straight into the editor, say — from sliding its rail in
+     from nowhere. A transition is for a change the user caused. */
+  .sqfy-app.sqfy-booting .layout,
+  .sqfy-app.sqfy-booting .queue-panel{ transition:none; }
+  /* Below the breakpoint .layout is a single column with the rail stacked
+     ABOVE the editor, so there is no track to collapse — it just goes.
+     Nothing is lost by that now: the rail only appears when you are looking
+     at one image, and the states that hide it (empty, grid) both carry their
+     own intake. Before #52 this had to stay put, because the empty state's
+     only dropzone lived in the rail; without this rule the mobile empty state
+     showed the rail's dropzone stacked directly above the empty state's own. */
+  @media (max-width: 900px){
+    .sqfy-app:not(.sqfy-has-rail) .queue-panel{ display:none; }
+  }
+
+  /* Peer of .editor-content, and it inherits that element's whole box —
+     content on top, settings below — so the two modes read as the same
+     application rather than two screens. */
+  .sqfy-app .batch-mode{
+    flex:1;
+    display:flex;
+    flex-direction:column;
+    min-height:0;
+    padding:24px;
+    gap:16px;
+  }
+  /* One quiet line, centred, above the grid. It costs a row of vertical
+     space on every visit and earns it on touch, where the hover pill below
+     never fires. */
+  .sqfy-app .batch-hint{
+    margin:0;
+    flex:none;
+    text-align:center;
+    font-size:0.82rem;
+    color:var(--text-faint);
+  }
+  .sqfy-app .batch-grid{
+    flex:1;
+    min-height:0;
+    overflow-y:auto;
+    display:grid;
+    /* 200px, against the prototype's 148px. The prototype's own finding was
+       that twelve tiles at 148 left a lot of dead space in a desktop editor
+       column — and the tile's job here is to be legible enough to CHOOSE
+       from, which is also the argument for `contain` below. Bigger tiles, not
+       a capped centred grid: capping would fix the emptiness by narrowing the
+       working surface the rail just slid out to widen. */
+    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
+    gap:14px;
+    align-content:start;
+    /* 10px of side padding, not 2: the reorder drop marker is drawn 8px off
+       a tile's leading edge, and on the first column that lands outside the
+       scroll container's content box, where overflow clips it. */
+    padding:2px 10px;
+  }
+  .sqfy-app .batch-tile{
+    /* Positioned for the remove button in its corner. */
+    position:relative;
+    display:flex;
+    flex-direction:column;
+    gap:9px;
+    padding:10px;
+    border:1px solid var(--border);
+    border-radius:var(--radius);
+    background:var(--surface);
+    cursor:pointer;
+    font:inherit;
+    color:inherit;
+    text-align:left;
+    transition:border-color .12s ease, background .12s ease;
+  }
+  .sqfy-app .batch-tile:hover{ border-color:var(--border-hover); background:var(--surface-2); }
+  .sqfy-app .batch-tile:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+  /* THE ONLY STATE A TILE CARRIES. Marking the seventeen images that worked
+     tells you nothing you can use; marking the three that did not is the whole
+     job, and the grid is the only surface that can say which three. */
+  .sqfy-app .batch-tile.is-failed{ border-color:var(--orange-2); }
+  .sqfy-app .batch-tile.is-failed:hover{ border-color:var(--orange-2); }
+  .sqfy-app .batch-tile-failed{
+    position:absolute;
+    top:6px;
+    left:6px;
+    z-index:3;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    width:22px;
+    height:22px;
+    border-radius:50%;
+    background:var(--orange-2);
+    color:#fff;
+    /* Left, opposite the remove button, so the two never sit under each other
+       — and unlike remove this is not revealed on hover: a tile you have to
+       hover to discover is broken is a tile you will not discover is broken. */
+  }
+  /* The badge stack buildThumbWrap produces is positioned against .thumb-wrap,
+     which is 44px in the rail — here it becomes the whole square cell. */
+  .sqfy-app .batch-tile .thumb-wrap{
+    position:relative;
+    width:100%;
+    height:auto;
+    aspect-ratio:1;
+    /* No ground and no frame (Xavier, 2026-08-31). The tile is already a
+       bordered card on its own surface; a second border a few pixels inside
+       the first, around a box that is mostly empty for any non-square image,
+       drew a rectangle nobody needed. The letterbox is the tile's surface
+       showing through. The checkerboard below is the one exception, and it
+       still earns its place — it says "this is transparent". */
+    /* Flex items get min-height:auto, which floors the box at its content's
+       min-content height — and the content is a full-resolution <img>. A
+       portrait source therefore stretched its "square" cell to 208×312 and
+       took the whole grid row with it. This is what makes the cell actually
+       square. */
+    min-height:0;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    border-radius:var(--radius-sm);
+    /* NOT overflow:hidden. The badges hang off the corners at -4px, exactly
+       as they do in the rail, and clipping them was why they were invisible
+       here in the first pass. Nothing needs clipping: `background` respects
+       border-radius on its own, and the image below rounds itself. */
+    overflow:visible;
+  }
+  /* The ring that separates a badge from what's behind it has to match what
+     IS behind it, and a tile's surface is not the rail row's. */
+  .sqfy-app .batch-tile .done-badge,
+  .sqfy-app .batch-tile .resize-badge,
+  .sqfy-app .batch-tile .sqfy-crop-badge,
+  .sqfy-app .batch-tile .sqfy-rename-badge{ border-color:var(--surface); }
+  .sqfy-app .batch-tile:hover .done-badge,
+  .sqfy-app .batch-tile:hover .resize-badge,
+  .sqfy-app .batch-tile:hover .sqfy-crop-badge,
+  .sqfy-app .batch-tile:hover .sqfy-rename-badge{ border-color:var(--surface-2); }
+  /* SQUARE CELL, WHOLE IMAGE (spec §2.2.1). contain, not cover: the cell is
+     square so the grid keeps a clean rhythm, and the image inside shows whole
+     at its own aspect — macOS Finder's icon view. A 16:9 shot reads as wide,
+     a portrait reads as tall, and the grid never goes ragged.
+     Deliberately different from the rail's thumb, and the reason is SIZE: at
+     44px a contained image is a stamp in a field of nothing and the thumb's
+     job is to be a scannable colour chip, so `cover` is right there. At 168px
+     the whole image is legible and IS the point — you are choosing which one
+     to click, and you cannot choose on a cropped centre.
+     One scoped rule, never a second thumbnail builder, so every badge a
+     future feature registers arrives here for free. */
+  .sqfy-app .batch-tile .thumb{
+    /* Sized to the IMAGE, not to the cell, and that is load-bearing for the
+       zoom (§3.6): the shared element a view transition tweens is a border
+       box, so a square box growing into a 16:9 stage would stretch the frames
+       on the way. Letting the box hug the picture — the wrap centres it and
+       supplies the letterbox ground — makes the transition a pure scale.
+       Visually identical to object-fit:contain, which stays as the fallback
+       for anything that sets an explicit size. */
+    width:auto;
+    height:auto;
+    max-width:100%;
+    max-height:100%;
+    object-fit:contain;
+    border-radius:var(--radius-sm);
+    display:block;
+    border:none;
+    background:transparent;
+  }
+  /* THE LETTERBOX GROUND. Flat and slightly recessed by default; the
+     transparency checkerboard ONLY where the source format can actually carry
+     alpha (.has-alpha, set in app.js). Filling every tile's margins with the
+     checkerboard was the prototype's answer and it reads badly — on a
+     1600×600 banner it is most of the cell and pulls the eye to the emptiness,
+     and it means nothing at all for a JPEG. This way it appears exactly when
+     it carries information. */
+  .sqfy-app .batch-tile .thumb-wrap.has-alpha{
+    background:
+      repeating-conic-gradient(#1c1d27 0% 25%, #17181f 0% 50%) 50% / 14px 14px;
+  }
+  /* THUMBNAIL REGENERATING — three beats: the image fades OUT, the spinner
+     holds alone for as long as the work plus the new image's decode takes,
+     then the replacement fades IN. What is on screen is either the old
+     thumbnail or the new one, never a cut between them.
+
+     ANIMATIONS, NOT TRANSITIONS, and that is not a style preference. The row
+     and tile are rebuilt from scratch on every render, so a transition has no
+     element that survives long enough to have a "from" — a render landing
+     mid-fade restarted it or skipped it outright, which is the pop. An
+     animation can be RESUMED: buildThumbWrap gives it a negative delay equal
+     to however long the phase has already been running, so a fresh element
+     renders the frame the discarded one was showing. Applies in the rail too,
+     where it is small but consistent. */
+  @keyframes sqfy-thumb-out{ from{ opacity:1; } to{ opacity:0; } }
+  @keyframes sqfy-thumb-in{ from{ opacity:0; } to{ opacity:1; } }
+  /* THE SPINNER IS AN IMAGE, NOT AN ANIMATION, and that is the whole fix.
+     Two earlier attempts failed for the same underlying reason: renderQueue
+     destroys and rebuilds every row and tile, and a CSS animation belongs to
+     the element running it. Declared on the spinner, the rotation restarted
+     on every rebuild — a dozen times a second while a tone slider moves, so
+     it never got past its first few degrees. Moved to a clock on .sqfy-app
+     (which is never rebuilt) it stopped restarting but started costing: an
+     animated custom property with inherits:true invalidates the computed
+     style of every element in the subtree on every frame, so the more tiles
+     were on screen the worse the whole app moved. Xavier called that one.
+
+     An animated SVG has neither problem. The animation lives in the image
+     resource, which the browser keys by URL and shares between every element
+     using it, so a rebuilt element joins the rotation already in progress
+     instead of starting its own — and nothing in the document is animating,
+     so nothing is being recalculated. One asset, decoded once, however many
+     spinners are on screen.
+
+     Inline as a data URI rather than a file in public/: the URL has to be
+     identical everywhere for the browser to share the timeline, and the two
+     WordPress builds do not resolve app-root paths the way the web build
+     does. Colours are baked because an SVG loaded as an image cannot see the
+     page's custom properties — they are --border-hover and --orange. */
+  .sqfy-app .thumb-wrap.is-loading::after{
+    content:'';
+    position:absolute;
+    top:50%; left:50%;
+    width:22px; height:22px;
+    margin:-11px 0 0 -11px;
+    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='18' fill='none' stroke='%233a3b4c' stroke-width='4'/><path d='M22 4a18 18 0 0 1 18 18' fill='none' stroke='%23ff7a45' stroke-width='4' stroke-linecap='round'><animateTransform attributeName='transform' type='rotate' values='0 22 22;360 22 22' dur='.8s' repeatCount='indefinite'/></path></svg>") center / contain no-repeat;
+    pointer-events:none;
+  }
+  .sqfy-app .qitem .thumb-wrap.is-loading::after{
+    width:16px; height:16px;
+    margin:-8px 0 0 -8px;
+  }
+  @media (prefers-reduced-motion: reduce){
+    .sqfy-app .thumb-wrap .thumb{ animation:none !important; }
+    .sqfy-app .thumb-wrap.is-loading .thumb{ opacity:.22; }
+    /* The same ring with its arc in the track's colour and no SMIL — a
+       still asset rather than a stopped animation. */
+    .sqfy-app .thumb-wrap.is-loading::after{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='18' fill='none' stroke='%233a3b4c' stroke-width='4'/><path d='M22 4a18 18 0 0 1 18 18' fill='none' stroke='%233a3b4c' stroke-width='4' stroke-linecap='round'/></svg>"); }
+  }
+
+  .sqfy-app .batch-tile-name{
+    font-size:0.76rem;
+    color:var(--text-dim);
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+  }
+  /* The add-more tile. The rail took the dropzone with it when it slid out,
+     and "drop anywhere works" is not discoverable on its own — this is also
+     the only keyboard-reachable intake left in this mode. */
+  .sqfy-app .batch-tile-add{
+    align-items:center;
+    justify-content:center;
+    gap:6px;
+    border-style:dashed;
+    background:transparent;
+    color:var(--text-faint);
+    min-height:0;
+  }
+  .sqfy-app .batch-tile-add:hover{ color:var(--orange); border-color:var(--orange); background:transparent; }
+
+  /* REMOVE, on the tile. Hidden until the tile is hovered or something inside
+     it has focus: it is destructive, and the tile's own job is to be clicked.
+     :focus-within rather than :hover alone is what keeps it reachable by
+     keyboard — tab to the tile, tab once more, and it is there.
+     Above the badges (z-index) because both live in the corners and the
+     remove has to be the one you can hit. */
+  .sqfy-app .batch-tile-remove{
+    position:absolute;
+    top:6px;
+    right:6px;
+    z-index:3;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    width:22px;
+    height:22px;
+    padding:0;
+    border-radius:50%;
+    border:1px solid var(--border);
+    background:var(--surface);
+    color:var(--text-dim);
+    cursor:pointer;
+    opacity:0;
+    transition:opacity .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
+  }
+  .sqfy-app .batch-tile:hover .batch-tile-remove,
+  .sqfy-app .batch-tile:focus-within .batch-tile-remove{ opacity:1; }
+  /* The same hover the rail's remove has carried since #17 — one remove
+     control in the app, one colour for it. */
+  .sqfy-app .batch-tile-remove:hover{ color:#fff; background:var(--orange-2); border-color:var(--orange-2); }
+  .sqfy-app .batch-tile-remove:focus-visible{ opacity:1; outline:2px solid var(--focus); outline-offset:2px; }
+
+  /* LEAVING. Removing an image used to be a pop — the row or tile was simply
+     not in the next render, which reads as a glitch rather than as something
+     you did. The exit is shaped to the surface it happens in: a rail row
+     slides out along the list it lives in, a grid tile shrinks in place,
+     because that is the direction each of them would move.
+     Purely visual — the space closes up when the render lands at the end.
+     Animating the reflow too would mean a FLIP pass over every sibling, which
+     is a different and much larger piece of work.
+     pointer-events off the moment it starts: the row is on its way out and
+     must not answer a second click. */
+  @keyframes sqfy-row-exit{
+    to{ opacity:0; transform:translateX(-14px); }
+  }
+  @keyframes sqfy-tile-exit{
+    to{ opacity:0; transform:scale(0.9); }
+  }
+  .sqfy-app .qitem.is-removing{
+    animation:sqfy-row-exit 190ms ease forwards;
+    pointer-events:none;
+  }
+  .sqfy-app .batch-tile.is-removing{
+    animation:sqfy-tile-exit 190ms ease forwards;
+    pointer-events:none;
+  }
+  /* An exit that cannot be seen is just a delay before the same pop, so with
+     motion off app.js removes the item outright and these never apply. */
+
+  /* THE EDIT PILL. Centred on the THUMBNAIL rather than the tile, so it sits
+     on the picture instead of drifting toward the filename caption below it —
+     and clear of both corner controls: the remove sits top right, the badge
+     stack runs down the left edge.
+     Same glass as the stage badges and the codec status line, which is what
+     lets it be legible over any thumbnail without a dim underneath it.
+     pointer-events:none because it is a label, not a button — the tile is the
+     click target and always has been. */
+  .sqfy-app .batch-tile-open{
+    position:absolute;
+    top:50%; left:50%;
+    z-index:2;
+    display:flex;
+    align-items:center;
+    gap:6px;
+    padding:6px 12px;
+    border-radius:var(--radius-pill);
+    background:rgba(13,14,19,0.74);
+    backdrop-filter:blur(6px);
+    -webkit-backdrop-filter:blur(6px);
+    border:1px solid var(--border-hover);
+    color:#fff;
+    font-size:0.78rem;
+    font-weight:600;
+    white-space:nowrap;
+    pointer-events:none;
+    opacity:0;
+    transform:translate(-50%, -50%) scale(0.94);
+    transition:opacity .12s ease, transform .12s ease;
+  }
+  /* :focus-visible on the tile is the keyboard half of the same affordance —
+     tabbing through the grid should say the same thing hovering does. */
+  .sqfy-app .batch-tile:hover .batch-tile-open,
+  .sqfy-app .batch-tile:focus-visible .batch-tile-open{
+    opacity:1;
+    transform:translate(-50%, -50%) scale(1);
+  }
+  /* Suppressed while a reorder drag is in flight (the grid carries the class,
+     not the dragged tile — it is the OTHER tiles that would light up as the
+     cursor crosses them and offer to open what you are busy moving), and on
+     the tile being opened, so it is not caught in the zoom's first frame. */
+  .sqfy-app .batch-grid.sqfy-reordering .batch-tile-open,
+  .sqfy-app .batch-tile.is-opening .batch-tile-open{ opacity:0; }
+  @media (prefers-reduced-motion: reduce){
+    .sqfy-app .batch-tile-open{ transition:none; transform:translate(-50%, -50%); }
+    .sqfy-app .batch-tile:hover .batch-tile-open,
+    .sqfy-app .batch-tile:focus-visible .batch-tile-open{ transform:translate(-50%, -50%); }
+  }
+
+  /* REORDER (Pro), the grid half of it — src/pro/reorder.js. A tile is a
+     picture, so dragging it needs no grip to advertise itself; what it does
+     need is somewhere to land, and in a wrapped grid that is a vertical rule
+     down the edge the item would be inserted at. Drawn on the tile the cursor
+     is nearest rather than by moving the tiles themselves: reflowing a grid
+     under a drag makes the drop target chase the cursor. */
+  .sqfy-app .batch-tile.sqfy-reorder-tile{ cursor:grab; }
+  .sqfy-app .batch-tile.sqfy-dragging{ opacity:.4; cursor:grabbing; }
+  .sqfy-app .batch-tile.sqfy-drag-before::before,
+  .sqfy-app .batch-tile.sqfy-drag-after::before{
+    content:'';
+    position:absolute;
+    top:4px;
+    bottom:4px;
+    width:3px;
+    border-radius:2px;
+    background:var(--purple);
+    pointer-events:none;
+  }
+  .sqfy-app .batch-tile.sqfy-drag-before::before{ left:-8px; }
+  .sqfy-app .batch-tile.sqfy-drag-after::before{ right:-8px; }
+  .sqfy-app .batch-tile-add-icon{ display:flex; }
+
+  /* ---------- batch settings ---------- */
+  /* Same surface, radius and padding as the editor's .controls bar, in the
+     same place on screen, because it is the same thing one level up: the
+     recipe for what you are looking at. */
+  .sqfy-app .batch-settings{
+    background:var(--surface);
+    border:1px solid var(--border);
+    border-radius:var(--radius-lg);
+    padding:18px 26px 22px;
+    display:flex;
+    flex-direction:column;
+    gap:16px;
+    flex:none;
+  }
+  .sqfy-app .batch-settings-head{
+    display:flex;
+    align-items:center;
+    gap:12px;
+    flex-wrap:wrap;
+  }
+  .sqfy-app .batch-settings-title{
+    margin:0;
+    font-size:0.72rem;
+    font-weight:700;
+    letter-spacing:.09em;
+    text-transform:uppercase;
+    color:var(--text-faint);
+  }
+  .sqfy-app .batch-settings-head .btn.accent{ flex:none; }
+  /* The set and the way out of it, next to the title that names them. Both
+     were a band of their own above the grid until #51's last pass — a whole
+     row of tiles spent on one number and one button. */
+  .sqfy-app .batch-settings-head .savings{ color:var(--success); font-weight:700; font-size:0.85rem; }
+  .sqfy-app .batch-settings-head .clear-queue-btn{ flex:none; }
+  /* A rule between the batch's description and the controls that act on it.
+     Hidden when the head wraps, where a divider mid-column reads as a mistake. */
+  .sqfy-app .batch-tools::before{
+    content:'';
+    align-self:stretch;
+    width:1px;
+    margin:2px 6px 2px 0;
+    background:var(--border);
+  }
+  .sqfy-app .batch-tools:empty{ display:none; }
+  .sqfy-app .batch-summary{
+    display:flex;
+    align-items:center;
+    gap:12px;
+    min-width:0;
+  }
+
+  /* MOBILE: FOUR ROWS, AND THE ACTION LAST. Everything above assumes one wide
+     line; at this width it was wrapping into an arbitrary shape — the count
+     pill orphaned beside the title, Clear next to Presets as if they were the
+     same kind of thing, and Process all stranded in the middle of the bar
+     with the settings it runs continuing underneath it.
+     display:contents dissolves the head so its children become rows of the
+     settings column itself. That is what lets `order` put the button AFTER
+     the cards: order only sorts siblings, and until the head is dissolved the
+     button and the cards are not siblings. The alternative was a second copy
+     of the button in the markup, which is a second thing to keep in step. */
+  @media (max-width: 700px){
+    .sqfy-app .batch-settings-head{ display:contents; }
+    .sqfy-app .batch-settings-title{ order:1; }
+    .sqfy-app .batch-summary{ order:2; }
+    .sqfy-app .batch-tools{ order:3; margin-left:0; }
+    /* The rule separated the description from the controls when they shared a
+       line. On their own rows the gap says it. */
+    .sqfy-app .batch-tools::before{ display:none; }
+    .sqfy-app .batch-settings-head .spacer{ display:none; }
+    .sqfy-app .batch-cards{ order:4; }
+    /* Last, and full width: it is the one thing on this bar you press when
+       everything above it is settled, so it reads as the end of the form
+       rather than as another control in it. */
+    .sqfy-app .batch-settings-head .btn.accent{
+      order:5;
+      width:100%;
+      justify-content:center;
+    }
+  }
+
+  /* ---------- the cards ---------- */
+  /* One row, wrapping. Each feature card takes an equal share of what is
+     left after the Pro card, which sizes to its two buttons — the four core
+     features are the ones with fields to lay out, so they are the ones that
+     get the width. minmax via flex-basis rather than a grid template because
+     the card count is not fixed: a host that registers no Pro tabs has five
+     cards, a free web boot has six, and neither should need its own rule. */
+  .sqfy-app .batch-cards{
+    display:flex;
+    flex-wrap:wrap;
+    align-items:stretch;
+    gap:12px;
+  }
+  .sqfy-app .batch-card{
+    flex:1 1 210px;
+    min-width:0;
+    display:flex;
+    flex-direction:column;
+    gap:10px;
+    padding:12px 14px 14px;
+    background:var(--surface-2);
+    border:1px solid var(--border);
+    border-radius:var(--radius);
+  }
+  .sqfy-app .batch-card-head{
+    display:flex;
+    align-items:center;
+    gap:8px;
+    min-height:20px;
+  }
+  /* A CARD TITLE IS A HEADING, NOT A FIELD LABEL. These were uppercase 0.74rem
+     --text-dim, which is within a hair of .control label above (uppercase
+     0.78rem --text-dim) — so "SIZE" and "MAX WIDTH" read as two items in one
+     list rather than as a section and the field inside it. They now match
+     .modal-header h3 exactly, which is the per-image editor's own answer to
+     "what does the title of this group of controls look like": same size,
+     same weight, same inherited text colour, no uppercasing. The field labels
+     are unchanged and are now clearly subordinate. */
+  .sqfy-app .batch-card-title{
+    display:flex;
+    align-items:center;
+    gap:8px;
+    margin:0;
+    font-size:1.05rem;
+    font-weight:700;
+  }
+  /* Dimmer than the word, like the toolbar pills': the name is what you read,
+     the glyph is what you find it by. */
+  .sqfy-app .batch-card-icon{
+    display:flex;
+    flex:none;
+    color:var(--text-dim);
+  }
+  /* The same PRO label the toolbar's cluster carries, for the same reason:
+     one label over a group reads as a tier, two badges read as two offers. */
+  .sqfy-app .batch-pro-label{
+    font-size:0.6rem;
+    font-weight:800;
+    letter-spacing:.1em;
+    padding:2px 6px;
+    border-radius:var(--radius-pill);
+    background:var(--gradient-brand);
+    color:#fff;
+  }
+  .sqfy-app .batch-card-body{
+    display:flex;
+    flex-direction:column;
+    align-items:stretch;
+    gap:12px;
+    min-width:0;
+  }
+  /* The field builders are shared with Quick Process, which stacks them in a
+     narrow column — so inside a card they only need their desktop minimums
+     dropped. */
+  .sqfy-app .batch-card-body .control{ min-width:0; }
+  .sqfy-app .batch-card-body .quality-control{ min-width:0; }
+  .sqfy-app .batch-card-body .batch-rename-row{ flex-wrap:wrap; }
+
+  /* QUALITY AND EFFORT SHARE A ROW. Format is the only card with three
+     fields, so it was setting the height of the whole bar — and the bar is
+     anchored to the bottom of the app, so its height comes straight out of
+     the grid above it. The two sliders are a natural pair (both are "how hard
+     do we work on this"), and neither needs the full card width to be read.
+     The select keeps its own line: it is the field the other two depend on.
+
+     flex-grow on the pair rather than a fixed half, because they are not
+     always both there — PNG has no quality and JPEG has no effort (the
+     builders hide the one that cannot apply). Whichever survives takes the
+     whole line rather than sitting in half of one. */
+  .sqfy-app .batch-card[data-id="format"] .batch-card-body{
+    flex-direction:row;
+    flex-wrap:wrap;
+    gap:10px 14px;
+  }
+  .sqfy-app .batch-card[data-id="format"] .batch-card-body > .control{ flex:1 1 100%; }
+  .sqfy-app .batch-card[data-id="format"] .batch-card-body > .quality-control{
+    flex:1 1 calc(50% - 7px);
+    min-width:118px;
+  }
+  /* And a little more of the row to spend it in, since it is carrying two
+     fields on that line where its neighbours carry one. */
+  .sqfy-app .batch-card[data-id="format"]{ flex-grow:1.5; }
+  /* A range input has an INTRINSIC minimum width — around 129px in Chrome —
+     and flex:1 alone will not take it below that. In a half-width column the
+     slider therefore refused to shrink, overflowed its row, and ran straight
+     under the readout beside it (two sliders and a "50" stacked on top of
+     each other). flex-basis:0 with min-width:0 is what makes it actually
+     share the line; the readout stops flexing at all so it cannot be the
+     thing that gives way. */
+  .sqfy-app .batch-card-body .quality-slider{ flex:1 1 0; min-width:0; }
+  .sqfy-app .batch-card-body .quality-row{ gap:8px; min-width:0; }
+  .sqfy-app .batch-card-body .quality-value{ flex:none; min-width:26px; font-size:0.85rem; }
+  /* Below this the pair has less width to share than one slider is usefully
+     drawn in, so they go back to a line each. The card is full-width here
+     anyway (the cards row has wrapped to one per line), so the height this
+     costs is height the bar has to spare. */
+  @media (max-width: 700px){
+    .sqfy-app .batch-card[data-id="format"] .batch-card-body > .quality-control{
+      flex:1 1 100%;
+    }
+  }
+
+  /* ---------- the Pro tools and their popovers ---------- */
+  /* In the settings head, between the title and Process all — the room was
+     already there, and a button belongs next to the bar's other button. */
+  .sqfy-app .batch-tools{
+    display:flex;
+    align-items:center;
+    gap:8px;
+    margin-left:6px;
+  }
+  .sqfy-app .batch-pro-slots{ display:flex; gap:8px; }
+  .sqfy-app .batch-pro-slot{ position:relative; }
+  .sqfy-app .batch-pro-btn{
+    appearance:none;
+    display:inline-flex;
+    align-items:center;
+    gap:7px;
+    border:1px solid var(--border);
+    background:var(--surface-3);
+    color:var(--text);
+    font:inherit;
+    font-size:0.85rem;
+    font-weight:600;
+    padding:9px 16px;
+    border-radius:var(--radius-pill);
+    cursor:pointer;
+    white-space:nowrap;
+    transition:border-color .12s ease, background .12s ease, color .12s ease;
+  }
+  /* Dimmer than the label beside it, the same way the toolbar pills' icons
+     are: the word is what you read, the glyph is what you find it by. */
+  .sqfy-app .batch-pro-btn-icon{
+    display:flex;
+    flex:none;
+    color:var(--text-dim);
+  }
+  .sqfy-app .batch-pro-btn:hover{ border-color:var(--border-hover); }
+  .sqfy-app .batch-pro-btn:hover .batch-pro-btn-icon,
+  .sqfy-app .batch-pro-btn.is-open .batch-pro-btn-icon{ color:var(--text); }
+  .sqfy-app .batch-pro-btn.is-open{ border-color:var(--purple); color:#fff; }
+  .sqfy-app .batch-pro-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+  .sqfy-app .batch-pro-btn.is-locked{ color:var(--text-dim); }
+
+  /* FLOWS UP, because the settings bar is anchored to the bottom of the app
+     and there is nothing below it to open into. Right-aligned to its button
+     rather than left, so a card sitting at the left edge of a narrow window
+     still opens into the bar's width instead of off the side. */
+  .sqfy-app .batch-pop{
+    position:absolute;
+    bottom:calc(100% + 10px);
+    left:0;
+    z-index:40;
+    min-width:280px;
+    max-width:min(560px, 80vw);
+    display:flex;
+    flex-direction:column;
+    gap:12px;
+    padding:14px 16px 16px;
+    background:var(--surface);
+    border:1px solid var(--border-hover);
+    border-radius:var(--radius);
+    box-shadow:0 18px 44px rgba(0,0,0,.5);
+  }
+  .sqfy-app .batch-pop[hidden]{ display:none; }
+  .sqfy-app .batch-pop-head{
+    display:flex;
+    align-items:center;
+    gap:10px;
+  }
+  /* Sits at the far end of the head — after the reset, which claims the
+     first of the trailing space with its own margin-left:auto. */
+  .sqfy-app .batch-pop-close{
+    appearance:none;
+    margin-left:auto;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    width:24px;
+    height:24px;
+    padding:0;
+    flex:none;
+    border:1px solid transparent;
+    border-radius:50%;
+    background:transparent;
+    color:var(--text-faint);
+    cursor:pointer;
+    transition:color .12s ease, background .12s ease, border-color .12s ease;
+  }
+  /* The reset already pushed itself right, so the close only needs the gap. */
+  .sqfy-app .batch-reset + .batch-pop-close{ margin-left:0; }
+  .sqfy-app .batch-pop-close:hover{ color:var(--text); background:var(--surface-2); border-color:var(--border); }
+  .sqfy-app .batch-pop-close:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+  .sqfy-app .batch-pop-title{
+    font-size:0.74rem;
+    font-weight:700;
+    letter-spacing:.07em;
+    text-transform:uppercase;
+    color:var(--text-dim);
+  }
+  /* The presets list brings its own scroller and padding — it is the
+     editor's dropdown list, mounted here (src/pro/presets.js). */
+  .sqfy-app .batch-pop-body:has(.sqfy-presets-batch-list){ gap:0; }
+
+  /* Reset names what it clears ("Reset Crop") and sits at the end of its own
+     card's head, so its subject is the line above it. Quiet by design: it is
+     an escape hatch, not one of the settings. */
+  .sqfy-app .batch-reset{
+    appearance:none;
+    margin-left:auto;
+    border:1px solid var(--border);
+    background:transparent;
+    color:var(--text-faint);
+    font:inherit;
+    font-size:0.72rem;
+    font-weight:600;
+    padding:4px 10px;
+    border-radius:var(--radius-pill);
+    cursor:pointer;
+    flex:none;
+    white-space:nowrap;
+    transition:color .12s ease, border-color .12s ease;
+  }
+  .sqfy-app .batch-reset:hover{ color:var(--text); border-color:var(--border-hover); }
+  .sqfy-app .batch-reset:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+
+  /* Batch crop: a ratio picker, not crop mode (spec §3.4.1). A drag-frame
+     across twelve images of different dimensions can only ever share the
+     RATIO, so the ratio is what the control offers — and anyone who wants to
+     nudge one image clicks its tile and gets the real crop tool. */
+  .sqfy-app .batch-ratios{ display:flex; gap:8px; flex-wrap:wrap; }
+  .sqfy-app .batch-ratio{
+    appearance:none;
+    border:1px solid var(--border);
+    background:var(--surface-2);
+    color:var(--text-dim);
+    font:inherit;
+    font-size:0.85rem;
+    font-weight:600;
+    padding:8px 16px;
+    border-radius:var(--radius-pill);
+    cursor:pointer;
+    transition:background .12s ease, color .12s ease, border-color .12s ease;
+  }
+  .sqfy-app .batch-ratio:hover{ color:var(--text); border-color:var(--border-hover); }
+  .sqfy-app .batch-ratio.is-active{
+    background:var(--select-tint);
+    border-color:var(--select-ink);
+    color:var(--select-ink);
+  }
+  .sqfy-app .batch-ratio:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+
+  @media (max-width: 900px){
+    .sqfy-app .batch-mode{ padding:16px; }
+    .sqfy-app .batch-grid{ grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); }
+    .sqfy-app .batch-settings{ padding:14px 16px 18px; }
+    .sqfy-app .batch-settings-head .btn{ width:100%; justify-content:center; }
+  }
+
+  /* ---------- mode-switch transition (roadmap #51, spec §3.6) ---------- */
+  /* The rail's own grid-template-columns transition is suspended while a view
+     transition runs. Both would otherwise animate the same change: the
+     browser captures the end state IMMEDIATELY after the DOM mutation, before
+     the CSS transition has moved at all, so the new snapshot would show the
+     rail still collapsed and the live layout would then slide again
+     underneath it. One motion means one animator. */
+  .sqfy-app.sqfy-mode-vt .layout{ transition:none; }
 /* Full-viewport overlay that hosts the Squishify app above wp-admin.
    Everything inside the app body is styled by core/squishify.css (.sqfy-app);
@@ -2152 +3517 @@
 }
 
+/* THREE TRACKS, matching core's own header (squishify.css). space-between
+   with two children put the logo and the Return button at the edges, which
+   was right until there was a third thing between them: a centred control
+   sitting in the leftover space drifts as either edge changes width, and the
+   Return button is the one element in this strip that must never move. Equal
+   outer tracks pin the middle to the real middle and decouple the two edges. */
 .sqfy-overlay-header{
   flex:none;
-  display:flex;
+  display:grid;
+  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
   align-items:center;
-  justify-content:space-between;
   gap:12px;
   height:48px;
@@ -2163 +3534 @@
   border-bottom:1px solid #2b2c3a;
 }
+/* A STYLE SCOPE, NOT A BOX. .sqfy-app carries core's design tokens and is the
+   prefix on every core rule, so the centre slot needs the class for anything
+   mounted into it to be styled at all — but the class also declares a flex
+   column with the app's background, which is not what a 48px header cell is.
+   Overridden here rather than by weakening core's own rule, since core is
+   right about what a .sqfy-app root looks like. */
+.sqfy-overlay-header .sqfy-overlay-center{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  min-width:0;
+  background:none;
+}
+.sqfy-overlay-header .sqfy-return-btn{ justify-self:end; }
 .sqfy-overlay-title{
   display:inline-flex;
@@ -2380 +3765 @@
   color:var(--text);
   font-size:0.82rem;
+  white-space:nowrap;
 }
 .sqfy-app .sqfy-upsell-feature-card:hover{
   border-color:var(--purple);
   background:var(--surface-3);
+}
+/* The card's second line: what the feature is, in three or four words.
+   Dimmer and smaller than the name so the name is what the eye lands on
+   while scanning — the card is a menu entry, not an explanation. */
+.sqfy-app .sqfy-upsell-feature-sub{
+  color:var(--text-dim);
+  font-size:0.74rem;
+  line-height:1.25;
 }
 .sqfy-app .sqfy-upsell-feature-see{
@@ -2941 +4335 @@
   font-weight:700;
 }
-.sqfy-app .sqfy-whatsnew-group{
-  text-align:left;
-}
-.sqfy-app .sqfy-whatsnew-group + .sqfy-whatsnew-group{
-  margin-top:14px;
-  padding-top:14px;
-  border-top:1px solid var(--border);
-}
+/* The version the highlights belong to. Small and dim on purpose — "What's
+   new" is the message; the number is a footnote that makes the changelog
+   link below make sense. Only ever ONE version here (see whats-new.js). */
 .sqfy-app .sqfy-whatsnew-version{
   font-size:0.78rem;
@@ -2954 +4343 @@
   letter-spacing:0.02em;
   color:var(--text-dim);
-  margin-bottom:6px;
+  margin-bottom:12px;
 }
 .sqfy-app .sqfy-whatsnew-items{
@@ -2962 +4351 @@
   display:flex;
   flex-direction:column;
-  gap:9px;
+  gap:14px;
+  text-align:left;
   font-size:0.85rem;
   line-height:1.45;
   color:var(--text-dim);
 }
+/* The row is check + body, and the BODY is the column that a clip drops
+   into under its own sentence. The check stays aligned to the first line of
+   text either way, which is why it can't be a plain baseline row any more. */
 .sqfy-app .sqfy-whatsnew-items li{
   display:flex;
   gap:10px;
-  align-items:baseline;
+  align-items:flex-start;
+}
+.sqfy-app .sqfy-whatsnew-body{
+  display:flex;
+  flex-direction:column;
+  gap:10px;
+  min-width:0;
 }
 .sqfy-app .sqfy-whatsnew-check{
   flex:none;
   color:var(--success);
-  transform:translateY(2px);
+  transform:translateY(3px);
 }
 .sqfy-app .sqfy-whatsnew-tag{
@@ -2988 +4387 @@
   vertical-align:middle;
 }
+
+/* The clip box. Same 16:9 / object-fit:cover contract as the Pro upsell
+   modal's media (src/upsell/upsell.css) — the clips are shared between the
+   two surfaces, so they have to be croppable identically or one of them
+   letterboxes. */
+.sqfy-app .sqfy-whatsnew-media{
+  position:relative;
+  aspect-ratio:16/9;
+  border-radius:var(--radius);
+  border:1px solid var(--border);
+  background:var(--surface-3);
+  overflow:hidden;
+}
+.sqfy-app .sqfy-whatsnew-media-placeholder{
+  position:absolute;
+  inset:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--text-dim);
+  opacity:.5;
+}
+/* Layered over the placeholder rather than replacing it, so there's no black
+   frame between the element being created and the first frame decoding.
+   Shared by <video> and <img>: the rule is pure box-filling. */
+.sqfy-app .sqfy-whatsnew-media-asset{
+  position:absolute;
+  inset:0;
+  display:block;
+  width:100%;
+  height:100%;
+  object-fit:cover;
+}
+
+/* Footer link to the full history. A quiet text link, not a second button:
+   "Got it" is the action, this is the way out for the one person in ten who
+   wants the detail. */
+.sqfy-app .sqfy-whatsnew-changelog{
+  display:block;
+  width:100%;
+  margin-top:16px;
+  padding:4px;
+  background:none;
+  border:0;
+  font:inherit;
+  font-size:0.8rem;
+  color:var(--text-dim);
+  text-decoration:underline;
+  text-underline-offset:2px;
+  cursor:pointer;
+}
+.sqfy-app .sqfy-whatsnew-changelog:hover{ color:var(--text); }
+
+/* Shared by this modal's "Got it" and the changelog's "Close" — one button
+   in one role, so one rule, as it was before the highlights rework.
+   `align-self` is the load-bearing line: core's .modal is a stretch-aligned
+   flex column, so a button here spans the full dialog width unless it opts
+   out. Sized to its label instead, so the eye lands on the clip and the
+   list rather than on a purple bar the width of the modal. */
 .sqfy-app .sqfy-whatsnew-close{
+  align-self:center;
   justify-content:center;
   font-weight:700;
-  padding:10px 16px;
-  margin-top:14px;
-  width:100%;
+  padding:9px 30px;
+  margin-top:2px;
 }
 
@@ -3000 +4458 @@
    openChangelogModal in whats-new.js for why it is a separate modal rather
    than a mode of the what's-new one. */
+
+/* Version groups belong to the changelog alone now — the what's-new modal
+   shows exactly one version and renders its own flat list. The group,
+   separator, and tighter list rules stayed with the consumer that still
+   uses them (groupsHTML in whats-new.js) rather than in the shared block
+   above, which is now what's-new's own layout. */
+.sqfy-app .sqfy-whatsnew-group{
+  text-align:left;
+}
+.sqfy-app .sqfy-whatsnew-group + .sqfy-whatsnew-group{
+  margin-top:14px;
+  padding-top:14px;
+  border-top:1px solid var(--border);
+}
+.sqfy-app .sqfy-whatsnew-group .sqfy-whatsnew-version{
+  margin-bottom:6px;
+}
+.sqfy-app .sqfy-changelog-modal .sqfy-whatsnew-items{
+  gap:9px;
+}
 
 /* Above the site menu (z-index 130), not just above the app's own modals

squishify/tags/1.5.0/assets/squishify-wp.js

@@ -158 +158 @@
   return `
       <div class="dropzone" id="${id}" tabindex="0" role="button" aria-label="${single ? "Add an image" : "Add images"}">
+        <!-- AN IMAGE WITH A PLUS, NOT A CLOUD WITH AN ARROW (2026-09-04).
+             This was the standard cloud-upload glyph — the single most
+             recognizable "this goes to a server" symbol there is — sitting
+             directly under a product whose tagline is "Nothing gets uploaded"
+             and a footer that promises images never leave the device. The
+             icon was arguing against the copy, and the icon wins: it is read
+             first and it is read without being read.
+             Prompted by a reddit reply reading the dropzone as an upload
+             widget, which Xavier had to answer in prose; the icon is what
+             invited the question.
+             An OPEN FOLDER, chosen over an image glyph (Xavier): a folder is
+             unambiguously a place on your own machine, which is the exact
+             claim being doubted, where an image glyph only names what goes in
+             and stays silent about where it lives. Open rather than closed
+             because this is a receptacle, not a browse button.
+             Deliberately not a downward arrow, which would only reverse the
+             direction of the same transport idea, and would then collide with
+             DOWNLOAD_ICON, the app's real arrow, used for the per-item and
+             batch download actions. -->
         <span class="dz-icon" aria-hidden="true">
-          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18a4.5 4.5 0 0 1-.5-8.98A5.5 5.5 0 0 1 17.4 8.02 4 4 0 0 1 17 16"/><path d="M12 12v7"/><path d="M9.5 14.5 12 12l2.5 2.5"/></svg>
+          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>
         </span>
         <span class="dz-title">Drop ${single ? "an image" : "images"} here</span>
@@ -169 +188 @@
       </div>`;
 }
+function privacyNoteHTML(s) {
+  return `
+      <div class="privacy-note">
+        <span class="privacy-icon" aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
+        </span>
+        <span class="privacy-text">${s.privacyNote}</span>
+      </div>`;
+}
 function renderAppHTML(config) {
   const s = config.strings;
   const single = 1 === config.maxQueue;
   return `
+  ${// THE HEADER EXISTS IF AND ONLY IF THE HOST SUPPLIED BRANDING FOR IT
+  // (#52, docs/features/active/app-shell-spec.md §2.2). That is the whole
+  // gate — no new boolean — and it is what makes a double header
+  // impossible: the WordPress overlay has had its own 48px header since it
+  // shipped, so its config stops passing brandHTML and core renders none.
+  //
+  // The brand used to live INSIDE the queue rail, which meant the app's
+  // identity was a child of the queue and vanished with it. Bulk mode made
+  // that visible by taking the rail away mid-session; the fix is not to
+  // keep the rail, it is to stop storing identity in it.
+  config.brandHTML ? `<header class="app-header">
+      ${config.brandHTML}
+      <!-- The centre track. Always rendered, even while empty, because it is
+           a GRID CELL and not a spacer: if it collapsed when the view switch
+           is hidden, the chrome slot would slide into the middle column and
+           the header's right edge would move every time a queue starts or
+           ends. Its counterpart on WordPress is config.headerSlot, which that
+           host builds into its own overlay header for the same reason. -->
+      <div class="app-header-center" id="appHeaderCenter"></div>
+      <!-- The chrome slot. Upgrade badge / trial countdown / site menu mount
+           here through api.mountChrome (app.js), which picks this when a
+           header exists and #emptyStateCorner when one does not — the
+           WordPress free plugin mounts the same upsell badge and has no
+           header to put it in. Core owns the choice so no feature module has
+           to know which host it is running on. -->
+      <div class="app-header-slot" id="appHeaderSlot"></div>
+    </header>` : ""}
+  <!-- THE VIEW SWITCH (roadmap #51). Grid and Preview are two ways of looking
+       at ONE queue, not a batch tool and a single-image tool — every feature
+       applies to all in both, and Process all finishes the job from either.
+       The grid used to be the only one of the two that announced itself: you
+       reached the stage by clicking a particular tile, so it read as "drill
+       into this file" rather than as a place you could work. A permanent
+       two-segment control says both exist, at all times, which is what makes
+       choosing between them possible at all.
+
+       RENDERED HERE AND RELOCATED AT BOOT (app.js). It has to live in the
+       header, and the header is not core's on every host — WordPress's
+       overlay owns that strip and core renders none. So the markup lives in
+       one place and app.js moves the node into #appHeaderCenter or, failing
+       that, config.headerSlot. Starts hidden, so it never flashes in the
+       document position it is about to leave.
+
+       NOT in the editor's action group, which is where the old [Grid] button
+       was. That group is ordered by rising commitment — navigate, commit and
+       advance, commit all and finalize — and a mode switch that lived inside
+       it read as "back" rather than as one of two peers. It also only existed
+       in one of the two modes, which is the one thing a mode control may
+       never do. -->
+  <div class="view-switch" id="viewSwitch" role="group" aria-label="View" hidden>
+    <button class="view-switch-btn" id="viewSwitchGrid" type="button" aria-pressed="false" title="See every image at once">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
+      <span>Grid</span>
+    </button>
+    <button class="view-switch-btn" id="viewSwitchPreview" type="button" aria-pressed="true" title="Work one image at a time, with the before/after compare">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9.5" r="1.6"/><path d="m4 17 4.5-4.5 3 3 3.5-3.5L20 16"/></svg>
+      <span>Preview</span>
+    </button>
+  </div>
   <div class="layout">
     <aside class="queue-panel">
-      ${config.brandHTML}
       ${dropzoneHTML("dropzone", s, single)}
       <input type="file" id="fileInput" accept="image/*"${single ? "" : " multiple"}>
@@ -199 +285 @@
         <div class="queue-empty" id="queueEmptyMsg">${single ? "No image yet.<br/>Add one to get started." : "Queue is empty.<br/>Add images to get started."}</div>
       </div>
-      <div class="privacy-note">
-        <span class="privacy-icon" aria-hidden="true">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
-        </span>
-        <span class="privacy-text">${s.privacyNote}</span>
-      </div>
     </aside>
 
@@ -220 +300 @@
 
         <div class="empty-hero">
-          <h2 class="empty-title">Let&rsquo;s get started!</h2>
-          <p class="empty-sub">Prep your ${single ? "image" : "images"} in 3 simple steps.</p>
+          <h2 class="empty-title">${single ? s.emptyTitleSingle : s.emptyTitle}</h2>
+          <p class="empty-sub">${single ? s.emptySubSingle : s.emptySub}</p>
           <!-- Shared slot directly under the sub line, same contract as
                #emptyStateCorner above: core renders it always and empty,
@@ -234 +314 @@
         </div>
 
-        <!-- Only rendered for a rail-less layout (config.hideQueue), where it
-             is the session's ONLY intake control. Hosts that show the rail
-             already have one and don't need a second. -->
-        ${config.hideQueue ? `<div class="empty-drop">${dropzoneHTML("emptyDropzone", s, single)}</div>` : ""}
+        <!-- ALWAYS rendered as of #52, where it used to be hideQueue-only.
+             The empty state has no rail now (spec §2.1), so this is the
+             session's only intake control on every host — and template.js's
+             standing invariant is that there is always a visible,
+             keyboard-reachable way to add a file, because the window-level
+             drop handler is mouse-only. A rail-less empty state with no
+             dropzone would have no intake at all for a keyboard or
+             assistive-tech user. -->
+        <div class="empty-drop">${dropzoneHTML("emptyDropzone", s, single)}</div>
 
         <div class="empty-steps">
@@ -345 +430 @@
             <input type="range" class="reveal-range" id="revealRange" min="0" max="100" value="50" aria-label="Drag to compare original and compressed image">
             <div class="spinner-overlay" id="spinner" hidden>Encoding…</div>
+            <!-- ON the stage, bottom left, not under the controls (Xavier,
+                 2026-08-31). It used to be a row in the editor column, which
+                 meant a message that appears twice a session either reserved
+                 a blank line forever or moved the controls when it arrived.
+                 Absolutely positioned inside the stage it can do neither, and
+                 it reads as what it is: a note about the picture in front of
+                 you. Bottom LEFT because the two stage badges own the top
+                 corners and the loupe grip owns the middle. -->
+            <div class="codec-status-line" id="codecStatus"></div>
           </div>
         </div>
@@ -384 +478 @@
 
           <div class="action-group">
-            <!-- Apply-to-all is a modifier on the primary button, not a
-                 button of its own. As a peer button it competed with
-                 Next file at the same weight and promoted the one path
-                 that skips crop and per-image control — which is Quick
-                 Process's job (roadmap #17), not this button's. Ticking
-                 it turns Next file into Finalize, so the batch commit and
-                 the finalize modal are one action instead of two. -->
-            <label class="checkbox-row applyall-row" id="applyAllRow" hidden>
-              <input type="checkbox" id="applyAllCheck">
-              Apply to all
-            </label>
+            <!-- Two named paths, not one button plus a modifier
+                 (2026-08-30). Apply-to-all was a checkbox here from
+                 2026-08-11: as a peer button it had competed with Next
+                 file at equal weight and promoted the path that skips
+                 crop and per-image control, which was Quick Process's
+                 job. BOTH halves of that reasoning expired in 1.4.0 —
+                 crop moved to the free tier and Quick Process moved to
+                 Pro — which left the free tier with no batch-shaped
+                 affordance at all, only a checkbox you had to already
+                 know to look for. So the batch path gets its own button
+                 and its own name again. Next file keeps the neutral
+                 weight; Process all takes the accent, the same purple
+                 the old Finalize state used, so the two paths read as a
+                 choice rather than a button and its modifier.
+
+                 #applyAllCheck survives as a hidden input, NOT as dead
+                 markup: it is still what applyAllMode() reads, which is
+                 what commitAll() and Pro presets both key off. Process
+                 all sets it. Keeping one flag means there is still
+                 exactly one definition of "this run covers the queue". -->
+            <input type="checkbox" id="applyAllCheck" hidden>
+            <!-- The [Grid] button used to sit here, leftmost, as the pure
+                 NAVIGATION step in 1.4.2's rising-commitment order. It moved
+                 to the header's view switch: the way between two peer views
+                 has to exist in BOTH of them and in the same place, and this
+                 group only exists in one. What is left is the two buttons
+                 that commit, which is a more honest group than the one that
+                 mixed navigation in with them:
+                   [Next file →]      [Process all]
+                    commit + advance   commit all + finalize
+                 Escape still backs out to the grid (app.js) — it is the same
+                 destination, reached the way Escape is reached everywhere. -->
             <button class="btn" id="itemActionBtn">
               ${config.icons.itemAction}
               ${s.itemAction}
             </button>
-            <button class="btn primary" id="nextBtn">
-              <span id="nextBtnLabel">Next file</span>
-              <svg id="nextBtnArrowIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="m13 6 6 6-6 6"/></svg>
-              <svg id="nextBtnFinalizeIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" hidden><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>
+            <button class="btn" id="nextBtn">
+              <span>Next file</span>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="m13 6 6 6-6 6"/></svg>
+            </button>
+            <button class="btn accent" id="processAllBtn">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>
+              <span id="processAllBtnLabel">${s.processAllAction}</span>
             </button>
           </div>
         </div>
-        <div class="codec-status-line" id="codecStatus"></div>
+      </div>
+
+      <!-- BATCH MODE (roadmap #51) — a PEER of #editorContent, not a child,
+           and that is the design (spec §2). An earlier prototype swapped only
+           the middle of the editor and kept one chrome; it failed three ways
+           from that single cause — the file heading read "sunset.jpg · 1 of
+           12" over a grid of twelve, "Next file" had no referent, and the
+           tool pills stayed live over a still-set currentId so Crop would
+           have entered crop mode on an image the user wasn't looking at.
+           Sharing no chrome removes all three by construction: batch mode has
+           no current image, so no control that assumes one exists here to be
+           wrong.
+           The vertical rhythm still mirrors the editor's — content on top,
+           settings below — so the two modes read as the same application. -->
+      <div class="batch-mode" id="batchMode" hidden>
+        <!-- PERMANENT, not dismissed after the first open (Xavier's call). It
+             is the only thing that says a tile is a door on a TOUCH screen,
+             where the hover pill never appears and native drag-reorder does
+             not exist either — so the one audience that cannot discover this
+             any other way is the one that would lose it. -->
+        <p class="batch-hint">Click an image to edit it on its own</p>
+        <div class="batch-grid" id="batchGrid"></div>
+
+        <div class="batch-settings">
+          <div class="batch-settings-head">
+            <!-- The heading carries the label the tablist used to (#51). With
+                 every feature on screen at once there is no tab strip left to
+                 name the region, and a bar of six unlabelled cards under a
+                 grid of images needs one line saying what it governs. -->
+            <h3 class="batch-settings-title">Batch settings</h3>
+            <!-- THE SET, AND THE WAY OUT OF IT (Xavier, 2026-08-31). These
+                 two had a band of their own above the grid, which cost a
+                 whole row of tiles to say one number and offer one button.
+                 The settings head already spans the app and had room, and
+                 both of these describe the same thing the cards below
+                 configure — the batch — so this is where they belong.
+
+                 "10 images", not "10 in queue", and "Clear images", not
+                 "Clear queue": a queue is a line of things waiting their turn,
+                 which is what the rail is — you walk it one at a time. Batch
+                 mode is the opposite, one pass over a set, so the set is what
+                 the words name.
+
+                 NO "done" COUNT. It read "0 done" for the entire life of the
+                 mode, because batch mode is one shot — you configure, you hit
+                 Process all, and the next thing you see is the finalize
+                 modal. A counter that only ever says zero is furniture. -->
+            <!-- Grouped so the two of them can be ONE row on a narrow
+                 window. Below 700px the head unwraps itself into the settings
+                 column (display:contents) and every child becomes its own
+                 row — which is right for the title and the Pro buttons, and
+                 wrong for these two, which belong side by side. -->
+            <div class="batch-summary">
+            <span class="stat-pill batch-count-pill">
+              <span class="icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h10"/></svg></span>
+              <b id="batchCount">0</b> <span id="batchCountLabel">images</span>
+            </span>
+            <!-- NO SAVINGS READOUT HERE, deliberately (Xavier, 2026-09-01).
+                 It summed only finished items while sitting beside a count of
+                 the whole queue, so one finished file out of six read as the
+                 batch's total. The deeper reason it went rather than got
+                 fixed: a running saving is an encode-as-you-go idea, and this
+                 mode does not encode as it goes. Grid configures once and runs
+                 once, so the number that matters arrives complete, in the
+                 finalize modal, at the moment it becomes true. Preview keeps
+                 its own — see #statSavings in the rail. -->
+            <!-- Beside Clear images because they are the same KIND of thing —
+                 one undoes the edits, the other undoes the queue — and a user
+                 looking for either is looking in the same place. Reset is the
+                 milder of the two so it goes first.
+                 The cards each carry their own Reset; this is the one that
+                 also reaches per-image state no card represents (Upscale is
+                 the case that forced it — a preset can apply it across the
+                 queue and nothing here could take it back off). -->
+            <button class="clear-queue-btn" id="batchResetBtn" type="button" title="Put every image back to how it arrived">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>
+              Reset all
+            </button>
+            <button class="clear-queue-btn" id="batchClearBtn" type="button">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg>
+              Clear images
+            </button>
+            </div>
+            <!-- The two Pro features live in the head rather than in a card
+                 of their own: they are buttons, not fields, and the head had
+                 the room the cards row did not want to give them. -->
+            <div class="batch-tools" id="batchTools"></div>
+            <div class="spacer"></div>
+            <button class="btn accent" id="batchProcessAllBtn" type="button">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>
+              <span id="batchProcessAllLabel">${s.processAllAction}</span>
+            </button>
+          </div>
+          <!-- CARDS, NOT TABS (Xavier, 2026-08-31). Five of the six batch
+               features fit side by side at any width the app is usable at,
+               and a tab strip was spending the bar's whole height on one of
+               them while the other five sat behind a click. See
+               batch-panel.js for what each card is and why the two Pro
+               features stayed behind a button instead. -->
+          <div class="batch-cards" id="batchCards"></div>
+        </div>
+      </div>
+
+      <!-- The two CENTRED alerts live inside the editor panel as of #52
+           (spec §2.5), because that is what they are centred on. They were
+           viewport-fixed at left:calc(50% + 155px) — half the rail,
+           hardcoded — which was right only while the rail was always there.
+           Absolute inside the column they describe, they cannot be wrong
+           again. The corner pill (#toast) and the batch progress bar are
+           deliberately left outside: neither is centred on anything. -->
+      <div class="center-toast" id="centerToast" role="status">
+        <span class="center-toast-icon" id="centerToastIcon" aria-hidden="true"></span>
+        <span class="center-toast-msg" id="centerToastMsg"></span>
+      </div>
+
+      <div class="notice-toast" id="capNotice" role="status">
+        <div class="notice-title" id="capNoticeTitle">Image scaled</div>
+        <div class="notice-body" id="capNoticeBody"></div>
       </div>
     </main>
+
   </div>
 
+  <!-- THE FOOTER (#52, spec §2.3). Rendered on every surface, because the
+       promise matters on every surface — and because it replaces TWO copies
+       of it: the note used to render once in the rail and once again as a
+       a .privacy-note-mobile twin, with CSS choosing per breakpoint.
+       The left string stays tier-aware and that is not cosmetic: free reads
+       "Free forever…", licensed and trial read "Private by design…". Shown to
+       a subscriber, "Free forever" says Pro is now free (src/web/main.js).
+       This changes WHERE the string renders and nothing about which one. -->
+  <footer class="app-footer">
+    ${privacyNoteHTML(s)}
+    <div class="spacer"></div>
+    <!-- Host slot. The web build moves index.html's existing .made-by-menu
+         node in here rather than re-emitting the links from JS: one copy,
+         still in the static HTML, and it degrades to the bottom of the body
+         flex column if the app never boots. WordPress leaves it empty. -->
+    <div class="app-footer-slot" id="appFooterSlot"></div>
+  </footer>
+
   <div class="toast" id="toast" role="status"></div>
-
-  <!-- The prominent half of the toast pair (app.js showCenterToast). The
-       pill above stays for repetitive, low-stakes confirmations; this one
-       is for the moments worth interrupting for — a batch finishing, a
-       preset landing, a session coming back, a failure. Centered over the
-       editor column, same as #capNotice. -->
-  <div class="center-toast" id="centerToast" role="status">
-    <span class="center-toast-icon" id="centerToastIcon" aria-hidden="true"></span>
-    <span class="center-toast-msg" id="centerToastMsg"></span>
-  </div>
-
-  <div class="notice-toast" id="capNotice" role="status">
-    <div class="notice-title" id="capNoticeTitle">Image scaled</div>
-    <div class="notice-body" id="capNoticeBody"></div>
-  </div>
 
   <div class="progress-toast" id="applyProgressToast">
@@ -475 +714 @@
         </div>
 
-        <label class="checkbox-row resize-applyall-row">
+        <!-- Hidden outright on a one-image queue: "all images" is a promise
+             about a batch that isn't there, and leaving it visible-but-inert
+             was one more control to read past on the single-image path. -->
+        <label class="checkbox-row resize-applyall-row" id="resizeApplyAllRow">
           <input type="checkbox" id="resizeApplyAllCheck">
           Apply resize to all images
@@ -542 +784 @@
     api.registerSourceRect((item) => item.crop || null);
     api.registerOriginalURL((item) => item.cropDisplayURL || null);
+    api.registerItemThumb((item) => {
+      if (item.crop && !item.cropDisplayURL) {
+        const sig = `${item.crop.x},${item.crop.y},${item.crop.w},${item.crop.h}`;
+        if (!item._cropBaking && item._cropBakeFailed !== sig) {
+          item._cropBaking = sig;
+          bakeOriginal(item);
+        }
+      }
+      return item.cropDisplayURL || null;
+    });
     api.registerItemBadge((item) => {
       if (!item.crop) return null;
@@ -567 +819 @@
     api.el("entryRow").insertBefore(entry, api.el("resizeEntry"));
     const entryBtn = entry.querySelector(".sqfy-crop-entry-btn");
-    const entryLabel = entry.querySelector(".sqfy-crop-entry-label");
     const clearBtn = entry.querySelector(".sqfy-crop-clear-btn");
     function markPreviewStale(item) {
@@ -588 +839 @@
       const has = !!(item && item.crop);
       entry.classList.toggle("active", has);
-      entryLabel.textContent = has ? item.cropAspect || "Cropped" : "Crop";
+      entryBtn.title = has ? "Crop — " + (item.cropAspect || "custom") : "Crop";
       clearBtn.hidden = !has;
     }
     function bakeOriginal(item) {
       const c = item.crop;
-      if (!c || !item.imgEl) return;
-      const { el: srcEl, w: natW, h: natH } = api.getPixelSource(item);
-      const out = croppedDims(item);
-      const canvas = document.createElement("canvas");
-      canvas.width = out.w;
-      canvas.height = out.h;
-      canvas.getContext("2d").drawImage(srcEl, c.x * natW, c.y * natH, Math.max(1, c.w * natW), Math.max(1, c.h * natH), 0, 0, out.w, out.h);
-      canvas.toBlob((blob) => {
-        if (!blob || !item.crop) return;
-        if (item.cropDisplayURL) URL.revokeObjectURL(item.cropDisplayURL);
-        item.cropDisplayURL = URL.createObjectURL(blob);
-        const current = api.getCurrentItem();
-        if (current && current.id === item.id && !active) {
-          imgOriginal.src = item.cropDisplayURL;
+      if (!c || !item.imgEl) {
+        item._cropBaking = null;
+        return;
+      }
+      item.thumbBusy = (item.thumbBusy || 0) + 1;
+      api.scheduleQueueRefresh();
+      api.queueThumbJob((done) => {
+        const crop = item.crop;
+        if (!crop || !item.imgEl) {
+          item.thumbBusy = Math.max(0, (item.thumbBusy || 1) - 1);
+          item._cropBaking = null;
+          api.scheduleQueueRefresh();
+          done();
+          return;
         }
-      }, "image/png");
+        const { el: srcEl, w: natW, h: natH } = api.getPixelSource(item);
+        const out = croppedDims(item);
+        const canvas = document.createElement("canvas");
+        canvas.width = out.w;
+        canvas.height = out.h;
+        canvas.getContext("2d").drawImage(
+          srcEl,
+          crop.x * natW,
+          crop.y * natH,
+          Math.max(1, crop.w * natW),
+          Math.max(1, crop.h * natH),
+          0,
+          0,
+          out.w,
+          out.h
+        );
+        canvas.toBlob((blob) => {
+          item.thumbBusy = Math.max(0, (item.thumbBusy || 1) - 1);
+          const sig = item._cropBaking;
+          item._cropBaking = null;
+          if (!blob || !item.crop) {
+            if (!blob && sig) item._cropBakeFailed = sig;
+            api.scheduleQueueRefresh();
+            done();
+            return;
+          }
+          item._cropBakeFailed = null;
+          if (item.cropDisplayURL) URL.revokeObjectURL(item.cropDisplayURL);
+          item.cropDisplayURL = URL.createObjectURL(blob);
+          const current = api.getCurrentItem();
+          if (current && current.id === item.id && !active) {
+            imgOriginal.src = item.cropDisplayURL;
+          }
+          api.scheduleQueueRefresh();
+          done();
+        }, "image/png");
+      });
     }
     function clearCrop(item) {
@@ -761 +1048 @@
       api.refreshControls();
     }
+    function applyRatioToItem(item, ratio, label, exact, { skipMatching = false, keepBake = false } = {}) {
+      if (!item.width) return false;
+      if (skipMatching && item.crop && item.cropAspect === label) return false;
+      let w, h;
+      if (exact && exact.w <= item.width && exact.h <= item.height) {
+        w = exact.w;
+        h = exact.h;
+      } else {
+        w = Math.min(item.width, item.height * ratio);
+        h = w / ratio;
+      }
+      const nw = Math.min(1, w / item.width);
+      const nh = Math.min(1, h / item.height);
+      item.crop = { x: (1 - nw) / 2, y: (1 - nh) / 2, w: nw, h: nh };
+      item.cropAspect = label;
+      markPreviewStale(item);
+      if (!keepBake && item.cropDisplayURL) {
+        URL.revokeObjectURL(item.cropDisplayURL);
+        item.cropDisplayURL = null;
+      }
+      return true;
+    }
     function applyCropToAll(source) {
       const d = croppedDims(source);
       const ratio = d.w / d.h;
       api.eachItem((item) => {
-        if (item.id === source.id || !item.width) return;
-        let w, h;
-        if (d.w <= item.width && d.h <= item.height) {
-          w = d.w;
-          h = d.h;
-        } else {
-          w = Math.min(item.width, item.height * ratio);
-          h = w / ratio;
-        }
-        const nw = Math.min(1, w / item.width);
-        const nh = Math.min(1, h / item.height);
-        item.crop = { x: (1 - nw) / 2, y: (1 - nh) / 2, w: nw, h: nh };
-        item.cropAspect = aspectLabel;
-        markPreviewStale(item);
-        if (item.cropDisplayURL) {
-          URL.revokeObjectURL(item.cropDisplayURL);
-          item.cropDisplayURL = null;
+        if (item.id === source.id) return;
+        applyRatioToItem(item, ratio, aspectLabel, d);
+      });
+    }
+    function applyRatioToAll(label) {
+      if (!label) {
+        api.eachItem((item) => clearCrop(item));
+        return;
+      }
+      const ratio = RATIOS[label];
+      if (!ratio) return;
+      api.eachItem((item) => {
+        if (applyRatioToItem(item, ratio, label, null, { skipMatching: true, keepBake: true })) {
+          bakeOriginal(item);
         }
       });
-    }
+      const current = api.getCurrentItem();
+      if (current) {
+        updateEntry(current);
+        api.requestEncode();
+      }
+      api.refreshQueue();
+      api.refreshControls();
+    }
+    api.registerFeatureData("batchCrop", {
+      get: () => {
+        let label;
+        let uniform = true;
+        let seen2 = false;
+        api.eachItem((item) => {
+          const l = item.crop ? item.cropAspect || "" : null;
+          if (!seen2) {
+            label = l;
+            seen2 = true;
+          } else if (l !== label) {
+            uniform = false;
+          }
+        });
+        return uniform && label ? label : null;
+      },
+      set: (label) => applyRatioToAll(label)
+    });
     function onModeKeydown(e) {
       const inInput = e.target === wInput || e.target === hInput;
@@ -977 +1308 @@
     entryBtn.addEventListener("click", () => {
       if (active) exitMode(false);
-      else enterMode();
+      else {
+        api.noteToolUsed("crop");
+        enterMode();
+      }
     });
     clearBtn.addEventListener("click", () => clearCrop(api.getCurrentItem()));
@@ -1029 +1363 @@
     api.el("entryRow").insertBefore(entry, api.el("resizeEntry"));
     const entryBtn = entry.querySelector(".sqfy-rename-entry-btn");
-    const entryLabel = entry.querySelector(".sqfy-rename-entry-label");
     const clearBtn = entry.querySelector(".sqfy-rename-clear-btn");
     function updateEntry(item) {
       const has = !!(item && item.outputName);
       entry.classList.toggle("active", has);
-      entryLabel.textContent = has ? "Renamed" : "Rename";
+      entryBtn.title = has ? "Rename — " + item.outputName : "Rename";
       clearBtn.hidden = !has;
     }
@@ -1111 +1444 @@
     let lastPad = null;
     let mode = "single";
+    let modeChosen = false;
     let padTouched = false;
     let manualInputs = [];
@@ -1127 +1461 @@
         pattern = p ? { base: p.base || "", start: p.start || 1, pad: p.pad || 1 } : null;
         applyPattern();
+      }
+    });
+    api.registerFeatureData("batchRename", {
+      get: () => pattern,
+      set: (p) => {
+        if (p && p.base) {
+          pattern = { base: p.base, start: Number.isFinite(p.start) ? p.start : 1, pad: p.pad || 1 };
+          applyPattern();
+        } else {
+          api.eachItem((i) => {
+            i.outputName = null;
+          });
+          pattern = null;
+        }
+        updateEntry(api.getCurrentItem());
+        api.refreshQueue();
       }
     });
@@ -1376 +1726 @@
     }
     modeBtns.forEach((b) => {
-      b.addEventListener("click", () => setMode(b.dataset.mode));
+      b.addEventListener("click", () => {
+        modeChosen = true;
+        setMode(b.dataset.mode);
+      });
     });
     modesRow.addEventListener("keydown", (e) => {
@@ -1383 +1736 @@
       const i = MODES.indexOf(mode);
       const next = MODES[(i + (e.key === "ArrowRight" ? 1 : MODES.length - 1)) % MODES.length];
+      modeChosen = true;
       setMode(next, { focus: false });
       modeBtns[MODES.indexOf(next)].focus();
@@ -1398 +1752 @@
       padInput.value = lastPad !== null ? lastPad : autoPad();
       backdrop.hidden = false;
-      setMode(multi ? mode : "single", { animate: false });
+      const opening = multi ? modeChosen ? mode : "sequence" : "single";
+      setMode(opening, { animate: false });
       document.addEventListener("keydown", onModalKeydown, true);
     }
@@ -1474 +1829 @@
       pressedOnBackdrop = false;
     });
-    entryBtn.addEventListener("click", openModal);
+    entryBtn.addEventListener("click", () => {
+      api.noteToolUsed("rename");
+      openModal();
+    });
     function clearRename(item) {
       if (item) item.outputName = null;
@@ -1494 +1852 @@
   }
 };
+const CHEVRON_ICON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>';
+const SIZE_ICON = '<svg class="resize-btn-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>';
+const FORMAT_ICON = '<svg class="resize-btn-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9h13l-3.5-3.5"/><path d="M20 15H7l3.5 3.5"/></svg>';
+function sanitizePrefix(v) {
+  return String(v || "").replace(/\s+/g, "-").replace(/[^a-zA-Z0-9._-]/g, "").replace(/^[.\-_]+/, "").replace(/\.+$/, "");
+}
+const BUILDERS = {
+  // The output codec. The one field every consumer wants.
+  // `label: ''` drops the visible label — bulk mode's cards are already
+  // headed by the feature they hold, so a Format card containing a field
+  // labelled Format says it twice (Xavier, 2026-08-31). Quick Process stacks
+  // its fields in one unheaded column and still needs it, which is why this is
+  // an option and not a removal. The name moves to aria-label rather than
+  // disappearing: the select still has to identify itself to a screen reader,
+  // which cannot see the card heading two elements up.
+  format(api, opts, id, emit) {
+    const name = void 0 === opts.label ? "Format" : opts.label;
+    const el = document.createElement("div");
+    el.className = "control";
+    el.innerHTML = `
+      ${name ? `<label for="${id}">${name}</label>` : ""}
+      <div class="select-wrap">
+        <select id="${id}"${name ? "" : ' aria-label="Format"'}></select>
+        <span class="select-chevron" aria-hidden="true">${CHEVRON_ICON}</span>
+      </div>`;
+    const select = el.querySelector("select");
+    ALL_FORMATS.forEach((fmt) => {
+      const opt = document.createElement("option");
+      opt.value = fmt;
+      opt.textContent = FORMAT_LABELS[fmt];
+      select.appendChild(opt);
+    });
+    select.value = opts.value || api.defaultSettings().format;
+    select.addEventListener("change", () => emit("format"));
+    return { el, get: () => select.value, set: (v) => {
+      if (v) select.value = v;
+    } };
+  },
+  quality(api, opts, id, emit) {
+    const el = document.createElement("div");
+    el.className = "control quality-control";
+    el.innerHTML = `
+      <label for="${id}">Quality</label>
+      <div class="quality-row">
+        <input type="range" class="quality-slider" id="${id}" min="1" max="100" value="50">
+        <span class="quality-value">50</span>
+      </div>`;
+    const slider = el.querySelector("input");
+    const value = el.querySelector(".quality-value");
+    slider.addEventListener("input", () => {
+      value.textContent = slider.value;
+      api.paintSlider(slider);
+      emit("quality");
+    });
+    return {
+      el,
+      get: () => parseInt(slider.value, 10),
+      set: (v) => {
+        if (!Number.isFinite(v)) return;
+        slider.value = String(v);
+        value.textContent = slider.value;
+        api.paintSlider(slider);
+      },
+      // PNG is lossless — its quality knob does nothing, and the editor's own
+      // controls bar has hidden it since the format strip was streamlined
+      // (#34). Same rule here, for the same reason: a control that cannot
+      // affect the output is worse than an absent one.
+      sync: (ctx) => {
+        el.hidden = "png" === ctx.format;
+      }
+    };
+  },
+  // Effort is the one field whose RANGE depends on the format — each codec's
+  // scale is its own (EFFORT_SCALES), and JPEG has none at all.
+  //
+  // Deliberately NOT clamped here by the per-image megapixel limit the editor
+  // applies (effortLimitFor in app.js). A batch has no single image to measure,
+  // and core already clamps per item at encode time through effectiveEffort —
+  // so showing the codec's full scale is honest and the encode stays safe.
+  effort(api, opts, id, emit) {
+    const el = document.createElement("div");
+    el.className = "control quality-control";
+    el.innerHTML = `
+      <label for="${id}">Effort</label>
+      <div class="quality-row">
+        <input type="range" class="quality-slider" id="${id}" min="1" max="6" value="4">
+        <span class="quality-value">4</span>
+      </div>`;
+    const slider = el.querySelector("input");
+    const value = el.querySelector(".quality-value");
+    slider.addEventListener("input", () => {
+      value.textContent = slider.value;
+      api.paintSlider(slider);
+      emit("effort");
+    });
+    return {
+      el,
+      get: () => parseInt(slider.value, 10),
+      set: (v) => {
+        if (!Number.isFinite(v)) return;
+        slider.value = String(v);
+        value.textContent = slider.value;
+        api.paintSlider(slider);
+      },
+      sync: (ctx) => {
+        const scale = EFFORT_SCALES[ctx.format];
+        el.hidden = !scale;
+        if (!scale) return;
+        slider.min = String(scale.min);
+        slider.max = String(scale.max);
+        if (parseInt(slider.value, 10) > scale.max) slider.value = String(scale.max);
+        value.textContent = slider.value;
+        api.paintSlider(slider);
+      }
+    };
+  },
+  // Max width. `units: ['px']` renders the bare number field Quick Process has
+  // always had; the default pair renders the unit switch too, matching the
+  // Resize modal's own px/% choice.
+  size(api, opts, id, emit) {
+    const units = opts.units || ["px", "%"];
+    const el = document.createElement("div");
+    el.className = "control";
+    el.innerHTML = `
+      <label for="${id}">${opts.label || "Max width"}</label>
+      <div class="batch-size-row">
+        <input type="number" id="${id}" placeholder="${opts.placeholder || "no resize"}" min="1">
+        ${units.length > 1 ? `<div class="select-wrap">
+                 <select class="batch-size-unit" aria-label="Resize unit">
+                   ${units.map((u) => `<option value="${u}">${u}</option>`).join("")}
+                 </select>
+                 <span class="select-chevron" aria-hidden="true">${CHEVRON_ICON}</span>
+               </div>` : ""}
+      </div>`;
+    const input = el.querySelector("input");
+    const unitSelect = el.querySelector(".batch-size-unit");
+    const unit = () => unitSelect ? unitSelect.value : units[0];
+    const clamp2 = () => {
+      if ("%" !== unit()) return;
+      const n = parseInt(input.value, 10);
+      if (Number.isFinite(n) && n > 100) input.value = "100";
+    };
+    input.addEventListener("input", () => {
+      clamp2();
+      emit("size");
+    });
+    if (unitSelect) {
+      unitSelect.addEventListener("change", () => {
+        clamp2();
+        emit("size");
+      });
+    }
+    return {
+      el,
+      // null means "no resize", exactly as a blank field reads.
+      get: () => {
+        const n = parseInt(input.value, 10);
+        return Number.isFinite(n) && n > 0 ? { value: n, unit: unit() } : null;
+      },
+      set: (v) => {
+        input.value = v && v.value ? String(v.value) : "";
+        if (unitSelect && v && v.unit && units.includes(v.unit)) unitSelect.value = v.unit;
+      }
+    };
+  },
+  // Rename, cut to the one mode that is a pure function of the batch.
+  // "This image" and the manual per-image list both need an image to point at,
+  // which a batch form does not have — the same reasoning that gave Quick
+  // Process a prefix field and nothing else.
+  //
+  // `full: true` adds start and padding, which bulk mode can offer because it
+  // is configured against a queue that already exists. Quick Process cannot:
+  // it is filled in against an empty queue, so the pad genuinely isn't
+  // knowable until the drop lands (rename's autoPad resolves it at run time).
+  rename(api, opts, id, emit) {
+    const full = !!opts.full;
+    const el = document.createElement("div");
+    el.className = "control";
+    el.innerHTML = `
+      <label for="${id}">${opts.label || "Rename prefix"}</label>
+      <div class="batch-rename-row">
+        <input type="text" id="${id}" placeholder="no rename" autocomplete="off" spellcheck="false">
+        ${full ? `<label class="batch-subfield">Start
+                 <input type="number" class="batch-rename-start" min="0" value="1">
+               </label>
+               <label class="batch-subfield">Digits
+                 <input type="number" class="batch-rename-pad" min="1" max="6" value="1">
+               </label>` : ""}
+      </div>
+      <p class="sqfy-bf-hint" style="visibility:hidden"></p>`;
+    const base = el.querySelector('input[type="text"]');
+    const startInput = el.querySelector(".batch-rename-start");
+    const padInput = el.querySelector(".batch-rename-pad");
+    const hint = el.querySelector(".sqfy-bf-hint");
+    const num = (input, fallback) => {
+      const n = input ? parseInt(input.value, 10) : NaN;
+      return Number.isFinite(n) && n >= 0 ? n : fallback;
+    };
+    function renderHint() {
+      const b = sanitizePrefix(base.value);
+      hint.style.visibility = b ? "" : "hidden";
+      if (!b) return;
+      if (full) {
+        const start = num(startInput, 1);
+        const pad = Math.min(num(padInput, 1) || 1, 6);
+        const at = (i) => b + String(start + i).padStart(pad, "0");
+        hint.textContent = `${at(0)}, ${at(1)}, ${at(2)}…`;
+      } else {
+        hint.textContent = `${b}1, ${b}2, ${b}3… (zero-padded to fit the batch)`;
+      }
+    }
+    [base, startInput, padInput].forEach((input) => {
+      if (!input) return;
+      input.addEventListener("input", () => {
+        renderHint();
+        emit("rename");
+      });
+    });
+    return {
+      el,
+      // null means "no rename", matching the size field above it.
+      get: () => {
+        const b = sanitizePrefix(base.value);
+        if (!b) return null;
+        return { base: b, start: num(startInput, 1), pad: Math.min(num(padInput, 1) || 1, 6) };
+      },
+      set: (v) => {
+        base.value = v && v.base ? v.base : "";
+        if (startInput) startInput.value = String(v && v.start !== void 0 ? v.start : 1);
+        if (padInput) padInput.value = String(v && v.pad ? v.pad : 1);
+        renderHint();
+      },
+      hint: renderHint
+    };
+  }
+};
+function createBatchFields(api, spec, { prefix = "bf", onChange } = {}) {
+  const fields = {};
+  const nodes = [];
+  let ready = false;
+  function syncDependents() {
+    const ctx = { format: fields.format ? fields.format.get() : api.defaultSettings().format };
+    Object.values(fields).forEach((f) => {
+      if (f.sync) f.sync(ctx);
+    });
+  }
+  function emit(kind) {
+    syncDependents();
+    if (ready && onChange) onChange(kind);
+  }
+  spec.forEach((entry, i) => {
+    const opts = "string" === typeof entry ? { kind: entry } : entry;
+    const build = BUILDERS[opts.kind];
+    if (!build) return;
+    const field = build(api, opts, `${prefix}${opts.kind[0].toUpperCase()}${opts.kind.slice(1)}${i}`, emit);
+    fields[opts.kind] = field;
+    nodes.push(field.el);
+  });
+  syncDependents();
+  return {
+    fields,
+    nodes,
+    get: (kind) => fields[kind] ? fields[kind].get() : void 0,
+    set(values = {}) {
+      Object.keys(values).forEach((kind) => {
+        if (fields[kind]) fields[kind].set(values[kind]);
+      });
+      syncDependents();
+    },
+    values() {
+      const out = {};
+      Object.keys(fields).forEach((kind) => {
+        out[kind] = fields[kind].get();
+      });
+      return out;
+    },
+    // Flip on once the caller's initial set() pass is done.
+    arm() {
+      ready = true;
+    }
+  };
+}
+const CROP_RATIOS = ["1:1", "4:3", "16:9"];
+function createBatchPanel(api, { cardsEl, toolsEl, extraTabs = [] }) {
+  let syncing = false;
+  const guard = (fn) => (...args) => {
+    if (!syncing) fn(...args);
+  };
+  const tabs = [];
+  const applied = { size: null, crop: null, rename: null };
+  const panel = { sync: () => {
+  } };
+  panel.resetAll = () => {
+    tabs.forEach((tab) => {
+      if (tab.reset) tab.reset();
+    });
+    api.resetAllItems();
+    panel.sync();
+  };
+  function addCard(tab) {
+    const card = document.createElement("section");
+    card.className = "batch-card";
+    card.dataset.id = tab.id;
+    const head = document.createElement("div");
+    head.className = "batch-card-head";
+    const title = document.createElement("h4");
+    title.className = "batch-card-title";
+    if (tab.icon) {
+      const icon = document.createElement("span");
+      icon.className = "batch-card-icon";
+      icon.setAttribute("aria-hidden", "true");
+      icon.innerHTML = tab.icon;
+      title.appendChild(icon);
+    }
+    title.appendChild(document.createTextNode(tab.label));
+    head.appendChild(title);
+    const body = document.createElement("div");
+    body.className = "batch-card-body";
+    if (tab.reset) head.appendChild(resetButton(tab));
+    card.appendChild(head);
+    card.appendChild(body);
+    cardsEl.appendChild(card);
+    tabs.push({ ...tab, card, body });
+    if (tab.mount) tab.mount(body, { close: () => {
+    } });
+  }
+  function resetButton(tab) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "batch-reset";
+    btn.textContent = "Reset " + tab.label;
+    btn.addEventListener("click", () => {
+      tab.reset();
+      panel.sync();
+    });
+    return btn;
+  }
+  let proSlotsEl = null;
+  function proTools(locked) {
+    if (!proSlotsEl) {
+      proSlotsEl = document.createElement("div");
+      proSlotsEl.className = "batch-pro-slots";
+      toolsEl.appendChild(proSlotsEl);
+    }
+    if (locked && !toolsEl.querySelector(".batch-pro-label")) {
+      const label = document.createElement("span");
+      label.className = "batch-pro-label";
+      label.textContent = "PRO";
+      toolsEl.prepend(label);
+    }
+    return proSlotsEl;
+  }
+  const popovers = [];
+  function closePopover(el, btn) {
+    el.hidden = true;
+    btn.classList.remove("is-open");
+    btn.setAttribute("aria-expanded", "false");
+  }
+  function closePopovers() {
+    popovers.forEach((p) => closePopover(p.el, p.btn));
+  }
+  function addProTab(tab) {
+    const slots = proTools(tab.locked);
+    const slot = document.createElement("div");
+    slot.className = "batch-pro-slot";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "batch-pro-btn" + (tab.locked ? " is-locked" : "");
+    if (tab.icon) {
+      const icon = document.createElement("span");
+      icon.className = "batch-pro-btn-icon";
+      icon.setAttribute("aria-hidden", "true");
+      icon.innerHTML = tab.icon;
+      btn.appendChild(icon);
+    }
+    btn.appendChild(document.createTextNode(tab.label));
+    slot.appendChild(btn);
+    if (tab.locked) {
+      btn.addEventListener("click", () => tab.onClick && tab.onClick());
+      slots.appendChild(slot);
+      tabs.push({ ...tab, body: null });
+      return;
+    }
+    const pop = document.createElement("div");
+    pop.className = "batch-pop";
+    pop.hidden = true;
+    const popHead = document.createElement("div");
+    popHead.className = "batch-pop-head";
+    const popTitle = document.createElement("span");
+    popTitle.className = "batch-pop-title";
+    popTitle.textContent = tab.label;
+    popHead.appendChild(popTitle);
+    if (tab.reset) popHead.appendChild(resetButton(tab));
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "batch-pop-close";
+    closeBtn.setAttribute("aria-label", "Close " + tab.label);
+    closeBtn.title = "Close";
+    closeBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>';
+    closeBtn.addEventListener("click", () => {
+      closePopover(pop, btn);
+      btn.focus();
+    });
+    popHead.appendChild(closeBtn);
+    const body = document.createElement("div");
+    body.className = "batch-card-body batch-pop-body";
+    pop.appendChild(popHead);
+    pop.appendChild(body);
+    slot.appendChild(pop);
+    slots.appendChild(slot);
+    btn.setAttribute("aria-haspopup", "true");
+    btn.setAttribute("aria-expanded", "false");
+    btn.addEventListener("click", () => {
+      const open = pop.hidden;
+      closePopovers();
+      pop.hidden = !open;
+      btn.classList.toggle("is-open", open);
+      btn.setAttribute("aria-expanded", String(open));
+    });
+    pop.addEventListener("click", (e) => e.stopPropagation());
+    popovers.push({ el: pop, btn });
+    tabs.push({ ...tab, body });
+    if (tab.mount) tab.mount(body, { close: () => closePopover(pop, btn) });
+  }
+  document.addEventListener("click", (e) => {
+    if (popovers.some((p) => p.btn === e.target || p.btn.contains(e.target))) return;
+    closePopovers();
+  });
+  document.addEventListener("keydown", (e) => {
+    if ("Escape" !== e.key) return;
+    if (popovers.every((p) => p.el.hidden)) return;
+    closePopovers();
+  });
+  const addTab = (tab) => tab.pro ? addProTab(tab) : addCard(tab);
+  const encodeFields = createBatchFields(api, [{ kind: "format", label: "" }, "quality", "effort"], {
+    prefix: "batch",
+    onChange: guard((kind) => {
+      const v = encodeFields.values();
+      if ("format" === kind) {
+        api.applySettings({ format: v.format, quality: v.quality });
+        syncing = true;
+        encodeFields.set({ effort: api.getSettings().effort[v.format] });
+        syncing = false;
+        return;
+      }
+      api.applySettings({ format: v.format, quality: v.quality, effort: { [v.format]: v.effort } });
+    })
+  });
+  const sizeFields = createBatchFields(api, [{ kind: "size", label: "Max width" }], {
+    prefix: "batch",
+    onChange: guard(() => {
+      applied.size = sizeFields.get("size");
+      api.applyResizeToAll(applied.size);
+    })
+  });
+  const renameFields = createBatchFields(api, [{ kind: "rename", full: true, label: "Sequence prefix" }], {
+    prefix: "batch",
+    onChange: guard(() => {
+      applied.rename = renameFields.get("rename");
+      api.setFeatureData("batchRename", applied.rename);
+    })
+  });
+  const cropBody = document.createElement("div");
+  cropBody.className = "control";
+  cropBody.innerHTML = `
+    <label>Crop every image to</label>
+    <div class="batch-ratios" role="group" aria-label="Batch crop ratio"></div>`;
+  const ratiosEl = cropBody.querySelector(".batch-ratios");
+  const ratioBtns = ["off", ...CROP_RATIOS].map((key) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "batch-ratio";
+    b.dataset.ratio = key;
+    b.textContent = "off" === key ? "Off" : key;
+    b.addEventListener("click", () => {
+      if (syncing) return;
+      applied.crop = "off" === key ? null : key;
+      api.setFeatureData("batchCrop", applied.crop);
+      syncCrop();
+    });
+    ratiosEl.appendChild(b);
+    return b;
+  });
+  function syncCrop() {
+    let current = api.getFeatureData("batchCrop");
+    if (!current) {
+      let aspect;
+      let uniform = true;
+      let seen2 = false;
+      api.eachItem((item) => {
+        const a = item.crop ? item.cropAspect || "" : "off";
+        if (!seen2) {
+          aspect = a;
+          seen2 = true;
+        } else if (a !== aspect) {
+          uniform = false;
+        }
+      });
+      current = seen2 && uniform ? aspect : "";
+    }
+    ratioBtns.forEach((b) => b.classList.toggle("is-active", b.dataset.ratio === current));
+  }
+  extraTabs.slice().sort((a, b) => ("start" === a.order ? -1 : 0) - ("start" === b.order ? -1 : 0)).forEach(addTab);
+  addTab({
+    id: "format",
+    label: "Format",
+    icon: FORMAT_ICON,
+    mount: (body) => encodeFields.nodes.forEach((n) => body.appendChild(n)),
+    reset: () => {
+      const d = api.defaultSettings();
+      api.applySettings({ format: d.format, quality: d.quality, effort: d.effort });
+    }
+  });
+  addTab({
+    id: "size",
+    label: "Size",
+    icon: SIZE_ICON,
+    mount: (body) => sizeFields.nodes.forEach((n) => body.appendChild(n)),
+    reset: () => {
+      applied.size = null;
+      api.applyResizeToAll(null);
+    }
+  });
+  addTab({
+    id: "crop",
+    label: "Crop",
+    icon: CROP_ICON,
+    mount: (body) => body.appendChild(cropBody),
+    reset: () => {
+      applied.crop = null;
+      api.setFeatureData("batchCrop", null);
+    }
+  });
+  addTab({
+    id: "rename",
+    label: "Rename",
+    icon: RENAME_ICON,
+    mount: (body) => renameFields.nodes.forEach((n) => body.appendChild(n)),
+    reset: () => {
+      applied.rename = null;
+      api.setFeatureData("batchRename", null);
+    }
+  });
+  let lastCount = api.queueLength();
+  let running = false;
+  let growPending = false;
+  function reapplyBatch() {
+    if (applied.size) api.applyResizeToAll(applied.size);
+    if (applied.crop) api.setFeatureData("batchCrop", applied.crop);
+    if (applied.rename) api.setFeatureData("batchRename", applied.rename);
+    tabs.forEach((t) => t.onGrow && t.onGrow());
+    let undecoded = false;
+    api.eachItem((item) => {
+      if (!item.width) undecoded = true;
+    });
+    growPending = undecoded;
+  }
+  api.onChange(() => {
+    const n = api.queueLength();
+    if (n > lastCount) growPending = true;
+    lastCount = n;
+    if (!growPending || running) return;
+    running = true;
+    queueMicrotask(() => {
+      try {
+        reapplyBatch();
+      } finally {
+        running = false;
+        lastCount = api.queueLength();
+      }
+    });
+  });
+  encodeFields.arm();
+  sizeFields.arm();
+  renameFields.arm();
+  Object.assign(panel, {
+    // Re-read everything from the queue. Called on entering batch mode and on
+    // every queue change, so the panel reports what is actually set rather
+    // than what was last typed into it.
+    sync() {
+      syncing = true;
+      const s = api.getSettings();
+      encodeFields.set({ format: s.format, quality: s.quality, effort: s.effort[s.format] });
+      let resize;
+      let uniform = true;
+      let seen2 = false;
+      api.eachItem((item) => {
+        const r = item.resize ? `${item.resize.value}${item.resize.unit}` : "";
+        if (!seen2) {
+          resize = item.resize;
+          seen2 = true;
+        } else if (r !== (resize ? `${resize.value}${resize.unit}` : "")) {
+          uniform = false;
+        }
+      });
+      sizeFields.set({ size: uniform ? resize : null });
+      renameFields.set({ rename: api.getFeatureData("batchRename") });
+      syncCrop();
+      tabs.forEach((t) => t.onSync && t.onSync());
+      syncing = false;
+    }
+  });
+  return panel;
+}
+const ALPHA_CAPABLE = /\.(png|webp|avif|svg)$/i;
+const ALPHA_MIME = /* @__PURE__ */ new Set(["image/png", "image/webp", "image/avif", "image/svg+xml"]);
 const DOWNLOAD_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11"/><path d="m7.5 11 4.5 4.5L16.5 11"/><path d="M5 19h14"/></svg>';
 const DEFAULT_TIPS = [
-  '<b>Tip:</b> <span class="text-orange">Apply to all</span> lets you batch-apply format, quality, and effort to every queued image at once.',
+  '<b>Tip:</b> <span class="text-orange">Process all</span> applies your format, quality, resize and rename to every queued image in one pass.',
   '<b>Privacy:</b> No files are uploaded — your images <span class="text-orange">never leave your device</span>.',
   '<b>Tip:</b> Optimized formats like <span class="text-orange">AVIF</span> can dramatically lower your website’s loading times.',
@@ -1508 +2472 @@
 ];
 const DEFAULT_CONFIG = {
+  // Branding for the app header — and, as of #52, THE GATE ON WHETHER THERE
+  // IS ONE (template.js, app-shell-spec.md §2.2). Empty means no header, which
+  // is what both WordPress builds already were: their overlay has carried its
+  // own 48px header with the logo and the Pro badge since it shipped, so they
+  // have never passed this and must never start. One host cannot end up with
+  // two headers, because the thing that asks for one is the thing that fills
+  // it.
   brandHTML: "",
+  // Where core mounts header-level controls (today: the Grid/Preview view
+  // switch) on a host that renders its OWN header instead of taking core's.
+  // WordPress is the case: its overlay header is a SIBLING of the app root,
+  // built in src/wp/wp-app.js, so core cannot find it by id and the element
+  // has to be handed over.
+  //
+  // THE CONTRACT IS A STYLE SCOPE, not a position: the element must be, or
+  // sit inside, something carrying the `sqfy-app` class. Every rule in
+  // squishify.css is scoped under it and every design token is declared on
+  // it, so a slot outside that scope would receive the control unstyled and
+  // token-less. Hosts that take core's header leave this empty and get
+  // #appHeaderCenter instead.
+  headerSlot: null,
   // Single-image mode (docs/wordpress-pro-hooks-spec.md, shared prerequisite):
   // this session produces exactly ONE asset — the queue caps at 1, every
@@ -1569 +2553 @@
     // about limits: the queue IS capped at MAX_QUEUE_SIZE, so "no limits"
     // would be a lie; "no account, no watermarks, no uploads" are all true.
-    privacyNote: "<strong>Free forever.</strong> No account, no watermarks, no uploads — your images never leave your device.",
+    //
+    // The tail is wrapped in .privacy-rest so the footer can drop it on a
+    // narrow window and keep the LEAD, which is the part that is doing the
+    // work — "Free forever" / "Private by design" is the claim; the rest is
+    // the evidence for it, and evidence is what you cut first when there is
+    // no room. Every host's string carries the same wrapper.
+    privacyNote: '<strong>Free forever.</strong> <span class="privacy-rest">No account, no watermarks, no uploads — your images never leave your device.</span>',
+    // Empty-state hero. The TITLE is fixed on every host and every session:
+    // it is the orientation line, and a headline that varies gives a
+    // returning user a "did something change?" beat while never reliably
+    // doing the identity job. The SUB is the slot allowed to vary — core
+    // ships one plain default and never rotates on its own; the web build
+    // rotates it per session (see EMPTY_SUBS in src/web/adapter.js). Both
+    // WordPress builds deliberately stay on the single line below.
+    emptyTitle: "Let&rsquo;s prep your images",
+    emptyTitleSingle: "Let&rsquo;s prep your image",
+    emptySub: "Resize, crop, rename and optimize a whole batch — in one pass.",
+    emptySubSingle: "Resize, crop, rename and optimize — in one pass.",
     step1Desc: `Drag &amp; drop or click to add your images — up to ${MAX_QUEUE_SIZE} per batch.`,
     step3Title: "Download &amp; go!",
     step3Desc: "Download your optimized images ready for the world.",
     itemAction: "Download",
+    // The batch path's own name in the controls bar. Deliberately says what
+    // it DOES to the queue, not where the output goes — where it goes is the
+    // finalize modal's job, and that's what batchAction below names.
+    processAllAction: "Process all",
+    // What the batch button becomes once there is nothing left to walk to:
+    // every image is committed, so the only thing left is the summary.
+    finalizeAction: "Finalize",
     batchAction: "Download all (.zip)",
     // Body of the centered "Image(s) scaled" notice shown when one or more
@@ -1613 +2621 @@
   const itemThumbProviders = [];
   const rowDecorators = [];
+  const tileDecorators = [];
   const selectListeners = [];
   const itemRemovedListeners = [];
@@ -1678 +2687 @@
   }
   rootEl.classList.add("sqfy-app");
+  rootEl.classList.add("sqfy-booting");
   if (config.singleImage) {
     rootEl.classList.add("sqfy-single");
@@ -1729 +2739 @@
     console.error(e);
   }
+  let forceSingleThread = false;
   function spawnWorker() {
     worker = new Worker(new URL(
       /* @vite-ignore */
-      "" + new URL("assets/encode.worker-CNcBUqEy.js", import.meta.url).href,
+      "" + new URL("assets/encode.worker-BqxZ11_8.js", import.meta.url).href,
       import.meta.url
     ), { type: "module" });
     worker.onmessage = handleWorkerMessage;
     worker.onerror = handleWorkerError;
+    if (forceSingleThread) worker.postMessage({ type: "config", singleThread: true });
   }
   spawnWorker();
-  function abortPendingEncodes() {
-    if (pending.size === 0) return;
+  function isOutOfMemoryError(err) {
+    const msg = err && err.message || String(err || "");
+    return /out of memory|allocate .*memory|allocation failed|memory allocation/i.test(msg);
+  }
+  function enterSingleThreadMode() {
+    forceSingleThread = true;
     worker.terminate();
     const cancelled = new Error("cancelled");
@@ -1748 +2764 @@
     spawnWorker();
   }
+  const ABORT_MEGAPIXEL_FLOOR = 4;
+  function abortPendingEncodes() {
+    if (pending.size === 0) return;
+    const worthAborting = Array.from(pending.values()).some(
+      (p) => !p.warmup && p.megapixels >= ABORT_MEGAPIXEL_FLOOR
+    );
+    if (!worthAborting) return;
+    worker.terminate();
+    const cancelled = new Error("cancelled");
+    pending.forEach((p) => p.reject(cancelled));
+    pending.clear();
+    loadedCodecs.clear();
+    spawnWorker();
+  }
   function codecEncode(format, imageData, options, isWarmup = false) {
+    const megapixels = imageData.width * imageData.height / 1e6;
     return new Promise((resolve, reject) => {
       const id = ++reqId;
-      pending.set(id, { resolve, reject, warmup: isWarmup });
+      pending.set(id, { resolve, reject, warmup: isWarmup, megapixels });
       if (!loadedCodecs.has(format)) {
         codecStatusEl.textContent = `Loading ${FORMAT_LABELS[format]} codec (first use only)…`;
@@ -1891 +2922 @@
   const resizeEntry = $("resizeEntry");
   const resizeEntryBtn = $("resizeEntryBtn");
-  const resizeEntryLabel = $("resizeEntryLabel");
   const resizeEntryPencil = $("resizeEntryPencil");
   const resizeEntryClearBtn = $("resizeEntryClearBtn");
@@ -1905 +2935 @@
   const resizeCurrentSize = $("resizeCurrentSize");
   const resizeApplyAllCheck = $("resizeApplyAllCheck");
+  const resizeApplyAllRow = $("resizeApplyAllRow");
   const resizeResetBtn = $("resizeResetBtn");
   const resizeApplyBtn = $("resizeApplyBtn");
@@ -1925 +2956 @@
   const itemActionBtn = $("itemActionBtn");
   const nextBtn = $("nextBtn");
-  const nextBtnLabel = $("nextBtnLabel");
-  const nextBtnArrowIcon = $("nextBtnArrowIcon");
-  const nextBtnFinalizeIcon = $("nextBtnFinalizeIcon");
-  const applyAllRow = $("applyAllRow");
+  const processAllBtnLabel = $("processAllBtnLabel");
   const applyAllCheck = $("applyAllCheck");
-  const applyAllMode = () => !applyAllRow.hidden && applyAllCheck.checked;
+  const processAllBtn = $("processAllBtn");
+  const viewSwitch = $("viewSwitch");
+  const viewSwitchGrid = $("viewSwitchGrid");
+  const viewSwitchPreview = $("viewSwitchPreview");
+  const viewSwitchHost = $("appHeaderCenter") || config.headerSlot || null;
+  if (viewSwitchHost) viewSwitchHost.appendChild(viewSwitch);
+  else viewSwitch.remove();
+  const batchMode = $("batchMode");
+  const batchGrid = $("batchGrid");
+  const batchCount = $("batchCount");
+  const batchCountLabel = $("batchCountLabel");
+  const batchClearBtn = $("batchClearBtn");
+  const batchResetBtn = $("batchResetBtn");
+  const batchProcessAllBtn = $("batchProcessAllBtn");
+  const batchProcessAllLabel = $("batchProcessAllLabel");
+  const queuePanel = rootEl.querySelector(".queue-panel");
   const applyProgressToast = $("applyProgressToast");
   const applyProgressFill = $("applyProgressFill");
@@ -2112 +3155 @@
     );
     if (currentId !== null) {
-      emptyState.hidden = true;
-      editorContent.hidden = false;
+      showEditorSurface();
       editorContent.classList.add("is-revealing");
       editorContent.addEventListener(
@@ -2137 +3179 @@
   }
   function thumbSrcFor(item) {
-    for (let i = 0; i < itemThumbProviders.length; i++) {
-      const src = itemThumbProviders[i](item);
-      if (src) return src;
-    }
-    return item.thumbSrc;
+    let src = item.thumbSrc;
+    for (const p of itemThumbProviders) {
+      if ("source" !== p.stage) continue;
+      const next = p.fn(item);
+      if (next) {
+        src = next;
+        break;
+      }
+    }
+    for (const p of itemThumbProviders) {
+      if ("transform" !== p.stage) continue;
+      const next = p.fn(item, src);
+      if (next) src = next;
+    }
+    return src;
+  }
+  const thumbJobs = [];
+  let thumbJobRunning = false;
+  function runNextThumbJob() {
+    if (thumbJobRunning) return;
+    const job = thumbJobs.shift();
+    if (!job) return;
+    thumbJobRunning = true;
+    requestAnimationFrame(() => {
+      let settled = false;
+      const done = () => {
+        if (settled) return;
+        settled = true;
+        thumbJobRunning = false;
+        runNextThumbJob();
+      };
+      try {
+        job(done);
+      } catch {
+        done();
+      }
+    });
+  }
+  function queueThumbJob(fn) {
+    thumbJobs.push(fn);
+    runNextThumbJob();
+  }
+  let queueRefreshPending = false;
+  function scheduleQueueRefresh() {
+    if (queueRefreshPending) return;
+    queueRefreshPending = true;
+    requestAnimationFrame(() => {
+      queueRefreshPending = false;
+      renderQueue();
+    });
+  }
+  const THUMB_FADE_MS = 300;
+  function beginThumbSwap(item, target) {
+    if (item._thumbSwapTo === target) return;
+    item._thumbSwapTo = target;
+    if ("out" !== item._thumbPhase) {
+      item._thumbPhase = "out";
+      item._thumbPhaseAt = performance.now();
+    }
+    const commit = () => {
+      if (item._thumbSwapTo !== target) return;
+      const left = Math.max(0, THUMB_FADE_MS - (performance.now() - item._thumbPhaseAt));
+      setTimeout(() => {
+        if (item._thumbSwapTo !== target) return;
+        item._thumbSwapTo = null;
+        item._thumbShownSrc = target;
+        renderQueue();
+      }, left);
+    };
+    const pre = new Image();
+    pre.addEventListener("load", commit, { once: true });
+    pre.addEventListener("error", commit, { once: true });
+    pre.src = target;
+    if (pre.complete) commit();
   }
   function buildThumbWrap(item) {
@@ -2148 +3259 @@
     const thumb = document.createElement("img");
     thumb.className = "thumb";
-    thumb.src = thumbSrcFor(item);
     thumb.alt = "";
+    const target = thumbSrcFor(item);
+    if (!item._thumbShownSrc) item._thumbShownSrc = target;
+    const swapping = target !== item._thumbShownSrc;
+    if (swapping) beginThumbSwap(item, target);
+    thumb.src = item._thumbShownSrc;
+    const loading = item.thumbBusy > 0 || swapping;
+    const now = performance.now();
+    if (loading) {
+      if ("out" !== item._thumbPhase) {
+        item._thumbPhase = "out";
+        item._thumbPhaseAt = now;
+      }
+    } else if ("out" === item._thumbPhase) {
+      item._thumbPhase = "in";
+      item._thumbPhaseAt = now;
+    }
+    const elapsed = now - item._thumbPhaseAt;
+    if ("in" === item._thumbPhase && elapsed >= THUMB_FADE_MS) item._thumbPhase = null;
+    if (item._thumbPhase) {
+      thumb.style.animation = "sqfy-thumb-" + item._thumbPhase + " " + THUMB_FADE_MS + "ms ease both";
+      thumb.style.animationDelay = -elapsed + "ms";
+    }
+    if (loading) thumbWrap.classList.add("is-loading");
     const doneBadge = document.createElement("span");
     doneBadge.className = "done-badge";
@@ -2169 +3302 @@
   }
   function renderQueue() {
+    applyLandingRule();
+    updateRailVisibility();
     updateResetAllBtn();
     updateFilePosition();
     queueList.innerHTML = "";
-    nextBtn.hidden = queue.length <= 1;
     {
+      const multi = queue.length > 1;
       const hasOtherPending = queue.some((i) => i.id !== currentId && i.status === "pending");
-      const canApplyAll = queue.length > 1 && hasOtherPending;
-      applyAllRow.hidden = !canApplyAll;
-      if (!canApplyAll) applyAllCheck.checked = false;
-      const finalizes = !hasOtherPending || applyAllMode();
-      nextBtnLabel.textContent = finalizes ? "Finalize" : "Next file";
-      nextBtnArrowIcon.hidden = finalizes;
-      nextBtnFinalizeIcon.hidden = !finalizes;
-      nextBtn.classList.toggle("primary", !finalizes);
-      nextBtn.classList.toggle("accent", finalizes);
-    }
+      nextBtn.hidden = !multi || !hasOtherPending;
+      processAllBtn.hidden = !multi;
+      processAllBtnLabel.textContent = hasOtherPending ? config.strings.processAllAction : config.strings.finalizeAction;
+      itemActionBtn.hidden = multi && !!config.hideItemActionInBatch;
+      itemActionBtn.classList.toggle("primary", !multi);
+      if (!multi) applyAllCheck.checked = false;
+    }
+    if (dropzone) dropzone.hidden = queue.length > 1 && gridAvailable();
+    renderViewSwitch();
     rootEl.classList.toggle("sqfy-has-queue", queue.length > 0);
     if (queue.length === 0) {
@@ -2229 +3363 @@
       remove.addEventListener("click", (e) => {
         e.stopPropagation();
-        removeItem(item.id);
+        removeItemWithExit(item.id, row);
       });
       row.appendChild(thumbWrap);
@@ -2253 +3387 @@
       statSavings.textContent = "";
     }
+    if ("grid" === viewMode) {
+      renderGrid();
+      if (batchPanel) batchPanel.sync();
+    }
     if (!autoProcessRunning) changeListeners.forEach((fn) => fn());
   }
-  function makeThumb(imgEl, cb) {
-    const MAX = 80;
+  function makeThumb(imgEl, alpha, cb) {
+    const MAX = 240;
     const scale = Math.min(1, MAX / Math.max(imgEl.naturalWidth, imgEl.naturalHeight));
     const w = Math.max(1, Math.round(imgEl.naturalWidth * scale));
@@ -2265 +3403 @@
     c.getContext("2d").drawImage(imgEl, 0, 0, w, h);
     try {
-      cb(c.toDataURL("image/jpeg", 0.6));
+      cb(alpha ? c.toDataURL("image/png") : c.toDataURL("image/jpeg", 0.6));
     } catch (e) {
       cb(imgEl.src);
+    }
+  }
+  let viewMode = "editor";
+  let viewModeChosen = false;
+  const BATCH_LANDING_MODE = "editor";
+  let batchPanel = null;
+  const batchCapable = () => !config.singleImage && !config.hideQueue && !config.lockQueue && 1 !== config.maxQueue;
+  const gridAvailable = () => queue.length > 0 && batchCapable();
+  function railVisible() {
+    return queue.length > 0 && "editor" === viewMode;
+  }
+  function updateRailVisibility() {
+    if (config.hideQueue) {
+      rootEl.classList.remove("sqfy-has-rail");
+      if (queuePanel) queuePanel.inert = false;
+      return;
+    }
+    const on = railVisible();
+    rootEl.classList.toggle("sqfy-has-rail", on);
+    if (queuePanel) {
+      queuePanel.inert = !on && !!(window.matchMedia && window.matchMedia("(min-width: 901px)").matches);
+    }
+  }
+  function applyViewMode() {
+    if (!gridAvailable()) viewMode = "editor";
+    const grid = "grid" === viewMode;
+    batchMode.hidden = !grid;
+    renderViewSwitch();
+    updateRailVisibility();
+    if (grid) {
+      emptyState.hidden = true;
+      editorContent.hidden = true;
+    } else if (!introRevealPending) {
+      const hasCurrent = null !== currentId && queue.some((i) => i.id === currentId);
+      emptyState.hidden = hasCurrent;
+      editorContent.hidden = !hasCurrent;
+    }
+  }
+  const ZOOM_NAME = "sqfy-mode-zoom";
+  let zoomItemId = null;
+  let zoomRun = 0;
+  function zoomEl() {
+    if (null === zoomItemId) return null;
+    if ("grid" === viewMode) {
+      const tile = batchGrid.querySelector(`.batch-tile[data-id="${zoomItemId}"] .thumb`);
+      return tile || null;
+    }
+    return currentId === zoomItemId ? imgOriginal : null;
+  }
+  function clearZoomNames() {
+    imgOriginal.style.viewTransitionName = "";
+    batchGrid.querySelectorAll(".thumb").forEach((el) => {
+      el.style.viewTransitionName = "";
+    });
+    zoomItemId = null;
+  }
+  function canAnimateModeSwitch() {
+    if ("function" !== typeof document.startViewTransition) return false;
+    return !(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  }
+  function setViewMode(mode, { chosen = false, zoomFrom = null } = {}) {
+    if (chosen) viewModeChosen = true;
+    holdEncode();
+    const apply = () => {
+      viewMode = mode;
+      applyViewMode();
+      renderQueue();
+    };
+    if (!canAnimateModeSwitch()) {
+      apply();
+      releaseEncode();
+      return;
+    }
+    zoomItemId = null !== zoomFrom ? zoomFrom : currentId;
+    const from = zoomEl();
+    if (from) from.style.viewTransitionName = ZOOM_NAME;
+    let transition;
+    try {
+      transition = document.startViewTransition(() => {
+        apply();
+        const to = zoomEl();
+        if (to) to.style.viewTransitionName = ZOOM_NAME;
+      });
+    } catch {
+      apply();
+      clearZoomNames();
+      releaseEncode();
+      return;
+    }
+    rootEl.classList.add("sqfy-mode-vt");
+    const run = ++zoomRun;
+    const settle = () => {
+      if (run !== zoomRun) return;
+      rootEl.classList.remove("sqfy-mode-vt");
+      clearZoomNames();
+      releaseEncode();
+    };
+    transition.finished.then(settle, settle);
+  }
+  function applyLandingRule() {
+    if (0 === queue.length) viewModeChosen = false;
+    if (!gridAvailable()) {
+      if ("grid" === viewMode) applyViewMode();
+      return;
+    }
+    if (viewModeChosen) return;
+    if (queue.length < 2) return;
+    if (BATCH_LANDING_MODE === viewMode) return;
+    viewMode = BATCH_LANDING_MODE;
+    applyViewMode();
+  }
+  function showEditorSurface() {
+    if ("grid" === viewMode) return;
+    emptyState.hidden = true;
+    editorContent.hidden = false;
+  }
+  function hasAlphaSource(item) {
+    return ALPHA_CAPABLE.test(item.name) || !!(item.file && ALPHA_MIME.has(item.file.type));
+  }
+  function renderGrid() {
+    batchGrid.innerHTML = "";
+    queue.forEach((item, index) => {
+      const tile = document.createElement("div");
+      tile.className = "batch-tile" + (item.encodeError ? " is-failed" : "");
+      tile.setAttribute("role", "button");
+      tile.tabIndex = 0;
+      tile.dataset.id = item.id;
+      tile.setAttribute("aria-label", "Edit " + displayName(item));
+      const thumbWrap = buildThumbWrap(item);
+      if (hasAlphaSource(item)) thumbWrap.classList.add("has-alpha");
+      tile.appendChild(thumbWrap);
+      const name = document.createElement("span");
+      name.className = "batch-tile-name";
+      name.textContent = displayName(item);
+      tile.appendChild(name);
+      if (item.encodeError) {
+        const failed = document.createElement("span");
+        failed.className = "batch-tile-failed";
+        failed.title = item.encodeError;
+        failed.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M12 8v5"/><path d="M12 16.5v.01"/></svg>';
+        tile.appendChild(failed);
+      }
+      const remove = document.createElement("button");
+      remove.type = "button";
+      remove.className = "batch-tile-remove";
+      remove.title = "Remove from the batch";
+      remove.setAttribute("aria-label", "Remove " + displayName(item));
+      remove.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>';
+      remove.addEventListener("click", (e) => {
+        e.stopPropagation();
+        removeItemWithExit(item.id, tile);
+      });
+      tile.appendChild(remove);
+      const openHint = document.createElement("span");
+      openHint.className = "batch-tile-open";
+      openHint.setAttribute("aria-hidden", "true");
+      openHint.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>Edit';
+      thumbWrap.appendChild(openHint);
+      const open = () => {
+        tile.classList.add("is-opening");
+        selectItem(item.id);
+        setViewMode("editor", { chosen: true, zoomFrom: item.id });
+      };
+      tile.addEventListener("click", open);
+      tile.addEventListener("keydown", (e) => {
+        if ("Enter" !== e.key && " " !== e.key) return;
+        e.preventDefault();
+        open();
+      });
+      tileDecorators.forEach((fn) => fn(tile, item, index));
+      batchGrid.appendChild(tile);
+    });
+    const add = document.createElement("button");
+    add.type = "button";
+    add.className = "batch-tile batch-tile-add";
+    add.setAttribute("aria-label", "Add images");
+    add.innerHTML = '<span class="batch-tile-add-icon" aria-hidden="true"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></span><span class="batch-tile-name">Add images</span>';
+    add.addEventListener("click", () => fileInput.click());
+    batchGrid.appendChild(add);
+    batchCount.textContent = queue.length;
+    batchCountLabel.textContent = 1 === queue.length ? "image" : "images";
+    batchProcessAllLabel.textContent = queue.some((i) => "pending" === i.status) ? config.strings.processAllAction : config.strings.finalizeAction;
+  }
+  function noteToolUsed(tool) {
+    if ("function" !== typeof config.onToolUsed) return;
+    try {
+      config.onToolUsed(tool);
+    } catch {
     }
   }
@@ -2357 +3683 @@
         // items keep the carry-from-item-to-item convenience); wins over committed*
         status: "pending",
+        // Set when a batch run could not encode this image, cleared the moment
+        // one can. The grid's only per-tile state, because on a batch the
+        // exceptions are the thing you need to find — see renderGrid.
+        encodeError: null,
         metricsReported: false,
         // has this item's bytes already gone into a reportBatchMetrics() call?
@@ -2394 +3724 @@
           );
         }
-        makeThumb(imgEl, (dataUrl) => {
+        makeThumb(imgEl, hasAlphaSource(item), (dataUrl) => {
           item.thumbSrc = dataUrl;
           renderQueue();
@@ -2476 +3806 @@
     updateFormatNote();
   }
+  const REMOVE_EXIT_MS = 190;
+  function removeItemWithExit(id, el) {
+    if (!el || el.classList.contains("is-removing")) return;
+    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      removeItem(id);
+      return;
+    }
+    el.classList.add("is-removing");
+    setTimeout(() => removeItem(id), REMOVE_EXIT_MS);
+  }
   function removeItem(id) {
     const idx = queue.findIndex((i) => i.id === id);
@@ -2504 +3844 @@
     currentId = null;
     resetSettingsToDefaults();
+    if (batchPanel) batchPanel.resetAll();
     showEmptyEditor();
     renderQueue();
@@ -2509 +3850 @@
   }
   function showEmptyEditor() {
-    emptyState.hidden = false;
-    editorContent.hidden = true;
+    if ("grid" !== viewMode) {
+      emptyState.hidden = false;
+      editorContent.hidden = true;
+    }
     imgOriginal.removeAttribute("src");
     imgPreview.removeAttribute("src");
@@ -2521 +3864 @@
     if (!finalizeModalBackdrop.hidden) closeFinalizeModal();
     currentId = id;
-    if (!introRevealPending) {
-      emptyState.hidden = true;
-      editorContent.hidden = false;
-    }
+    if (!introRevealPending) showEditorSurface();
     fnameEl.textContent = item.name;
     updateFnameTip();
@@ -2691 +4031 @@
     const options = buildOptions(format, quality, effort);
     const pixels = applyPixelTransforms(item, cloneImageData(cachedImageData));
-    const buffer = await codecEncode(format, pixels, options);
-    return new Blob([buffer], { type: MIME[format] });
+    try {
+      const buffer = await codecEncode(format, pixels, options);
+      return new Blob([buffer], { type: MIME[format] });
+    } catch (err) {
+      if (forceSingleThread || !isOutOfMemoryError(err)) throw err;
+      enterSingleThreadMode();
+      const retryPixels = applyPixelTransforms(item, cloneImageData(cachedImageData));
+      const buffer = await codecEncode(format, retryPixels, options);
+      return new Blob([buffer], { type: MIME[format] });
+    }
+  }
+  let encodeHeld = false;
+  function holdEncode() {
+    encodeHeld = true;
+    clearTimeout(debounceTimer);
+  }
+  function releaseEncode() {
+    if (!encodeHeld) return;
+    encodeHeld = false;
+    scheduleEncode();
   }
   function scheduleEncode() {
+    if (encodeHeld) return;
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(runEncode, 220);
@@ -2715 +4074 @@
       item.previewURL = URL.createObjectURL(blob);
       item.encodedSignature = signature;
+      if (item.encodeError) {
+        item.encodeError = null;
+        scheduleQueueRefresh();
+      }
       changeListeners.forEach((fn) => fn());
       imgPreview.hidden = false;
@@ -2721 +4084 @@
       const pct = Math.round((1 - blob.size / item.size) * 100);
       outPctEl.textContent = pct >= 0 ? "-" + pct + "%" : "+" + Math.abs(pct) + "%";
-      codecStatusEl.textContent = FORMAT_LABELS[settings.format] + " ready.";
+      codecStatusEl.textContent = "";
       encodedListeners.forEach((fn) => fn(item));
       if (!isEncodedUpToDate(item)) scheduleEncode();
@@ -2729 +4092 @@
       outPctEl.textContent = "";
       codecStatusEl.textContent = "";
+      item.encodeError = "Encode failed: " + e.message;
+      scheduleQueueRefresh();
       showCenterToast("Encode failed: " + e.message, "error");
       console.error(e);
@@ -2755 +4120 @@
     const stageRect = stage.getBoundingClientRect();
     const imgRect = imgOriginal.getBoundingClientRect();
+    const innerRect = stageInner.getBoundingClientRect();
     if (stageRect.width === 0 || imgRect.width === 0) return;
     const xInStage = v / 100 * stageRect.width;
@@ -2760 +4126 @@
     const boundaryPct = Math.max(0, Math.min(100, xInImage / imgRect.width * 100));
     imgPreview.style.clipPath = `inset(0 0 0 ${boundaryPct}%)`;
-    dividerLine.style.left = xInImage + "px";
-    loupeGrip.style.left = xInImage + "px";
+    const xInInner = imgRect.left - innerRect.left + xInImage;
+    dividerLine.style.left = xInInner + "px";
+    loupeGrip.style.left = xInInner + "px";
   }
   function commitCurrent() {
@@ -2907 +4274 @@
     const active = !!resize;
     resizeEntry.classList.toggle("active", active);
-    resizeEntryLabel.textContent = active ? resizeLabelFor(resize) : "Resize";
+    resizeEntryBtn.title = active ? "Resize — " + resizeLabelFor(resize) : "Resize";
     resizeEntryPencil.hidden = !active;
     resizeEntryClearBtn.hidden = !active;
@@ -2924 +4291 @@
     const item = queue.find((i) => i.id === currentId);
     if (!item) return;
+    noteToolUsed("resize");
     resizeModalItemId = item.id;
     const resize = item.resize;
@@ -2933 +4301 @@
     const work = workingDims(item);
     resizeCurrentSize.textContent = work.w && work.h ? `${work.w} × ${work.h} px` : "—";
-    resizeApplyAllCheck.checked = false;
+    const multi = queue.length > 1;
+    resizeApplyAllRow.hidden = !multi;
+    resizeApplyAllCheck.checked = multi;
     updateResizeUnitVisibility();
     paintSlider(resizePctSlider);
@@ -3157 +4527 @@
     }
   });
-  nextBtn.addEventListener("click", async () => {
-    if (applyAllMode()) {
+  function toGrid() {
+    noteToolUsed("grid");
+    setViewMode("grid", { chosen: true });
+  }
+  function toPreview() {
+    setViewMode("editor", { chosen: true });
+  }
+  viewSwitchGrid.addEventListener("click", () => {
+    if ("grid" === viewMode) return;
+    toGrid();
+  });
+  viewSwitchPreview.addEventListener("click", () => {
+    if ("editor" === viewMode) return;
+    if (null === currentId || !queue.some((i) => i.id === currentId)) {
+      if (!queue.length) return;
+      selectItem(queue[0].id);
+    }
+    toPreview();
+  });
+  function renderViewSwitch() {
+    if (!viewSwitchHost) return;
+    viewSwitch.hidden = !gridAvailable();
+    const grid = "grid" === viewMode;
+    viewSwitchGrid.classList.toggle("active", grid);
+    viewSwitchPreview.classList.toggle("active", !grid);
+    viewSwitchGrid.setAttribute("aria-pressed", String(grid));
+    viewSwitchPreview.setAttribute("aria-pressed", String(!grid));
+  }
+  const TEXT_ENTRY_TYPES = /* @__PURE__ */ new Set([
+    "text",
+    "search",
+    "url",
+    "tel",
+    "email",
+    "password",
+    "number",
+    "date",
+    "datetime-local",
+    "month",
+    "week",
+    "time",
+    "color"
+  ]);
+  document.addEventListener("keydown", (e) => {
+    if ("Escape" !== e.key || e.defaultPrevented) return;
+    if ("editor" !== viewMode || !gridAvailable()) return;
+    const el = document.activeElement;
+    if (el) {
+      const tag = el.tagName;
+      const typing = el.isContentEditable || "TEXTAREA" === tag || "SELECT" === tag || "INPUT" === tag && TEXT_ENTRY_TYPES.has((el.type || "text").toLowerCase());
+      if (typing) return;
+    }
+    if (rootEl.querySelector(".modal-backdrop:not([hidden])")) return;
+    if (rootEl.classList.contains("sqfy-crop-mode")) return;
+    if (document.querySelector(".sqfy-tone-panel")) return;
+    if (document.querySelector(".sqfy-presets-dropdown:not([hidden])")) return;
+    if (document.querySelector(".sqfy-site-menu.show")) return;
+    e.preventDefault();
+    toGrid();
+  });
+  batchClearBtn.addEventListener("click", () => clearQueue());
+  batchResetBtn.addEventListener("click", () => {
+    if (!batchPanel) return;
+    batchPanel.resetAll();
+    showToast("All edits cleared.");
+  });
+  batchProcessAllBtn.addEventListener("click", async () => {
+    if (queue.length === 0) return;
+    if (queue.some((i) => "pending" === i.status)) {
+      applyAllCheck.checked = true;
+      try {
+        await commitAll();
+        openFinalizeModal();
+      } finally {
+        applyAllCheck.checked = false;
+      }
+      return;
+    }
+    await recommitStale();
+    openFinalizeModal();
+  });
+  processAllBtn.addEventListener("click", async () => {
+    const hasOtherPending = queue.some((i) => i.id !== currentId && i.status === "pending");
+    if (!hasOtherPending) {
+      const item = commitCurrent();
+      if (!item) {
+        showToast("Still encoding — one second.");
+        return;
+      }
+      await recommitStale();
+      openFinalizeModal();
+      return;
+    }
+    applyAllCheck.checked = true;
+    try {
       await commitAll();
       openFinalizeModal();
-      return;
-    }
+    } finally {
+      applyAllCheck.checked = false;
+    }
+  });
+  nextBtn.addEventListener("click", async () => {
     const item = commitCurrent();
     if (!item) {
@@ -3176 +4642 @@
     }
   });
-  applyAllCheck.addEventListener("change", renderQueue);
   function openApplyProgress(total) {
     applyProgressFill.style.width = "0%";
@@ -3192 +4657 @@
     if (queue.length === 0) return;
     nextBtn.disabled = true;
-    applyAllCheck.disabled = true;
+    processAllBtn.disabled = true;
     batchRunning = true;
     const total = queue.length;
     let done = 0;
+    const failed = [];
     openApplyProgress(total);
     try {
@@ -3225 +4691 @@
           item.committedPixelSig = itemPixelSignature(item);
           item.status = "done";
+          item.encodeError = null;
         } catch (e) {
-          showToast(`Skipped ${item.name} — couldn't encode as ${FORMAT_LABELS[settings.format]}.`);
+          item.encodeError = `Couldn't encode as ${FORMAT_LABELS[settings.format]}.`;
+          failed.push(item.name);
         }
         done++;
@@ -3232 +4700 @@
       }
       renderQueue();
-      showCenterToast(`Applied ${FORMAT_LABELS[settings.format]} to all files.`);
+      if (failed.length) {
+        showCenterToast(
+          `${failed.length} of ${total} couldn't be encoded as ${FORMAT_LABELS[settings.format]} — they're marked in the grid.`,
+          "error"
+        );
+      } else {
+        showCenterToast(`Applied ${FORMAT_LABELS[settings.format]} to all files.`);
+      }
     } finally {
       batchRunning = false;
       nextBtn.disabled = false;
-      applyAllCheck.disabled = false;
+      processAllBtn.disabled = false;
       setTimeout(closeApplyProgress, 500);
     }
@@ -3245 +4720 @@
     const total = stale.length;
     let done = 0;
+    const failedStale = [];
     openApplyProgress(total);
     try {
@@ -3261 +4737 @@
           item.committedSize = blob.size;
           item.committedPixelSig = itemPixelSignature(item);
+          item.encodeError = null;
         } catch (e) {
-          showToast(`Couldn't re-encode ${item.name} — it kept its previous version.`);
+          item.encodeError = "Couldn't re-encode — kept its previous version.";
+          failedStale.push(item.name);
         }
         done++;
@@ -3268 +4746 @@
       }
       renderQueue();
+      if (failedStale.length) {
+        showCenterToast(
+          `${failedStale.length} of ${total} couldn't be re-encoded — they're marked in the grid and keep their previous version.`,
+          "error"
+        );
+      }
     } finally {
       setTimeout(closeApplyProgress, 500);
@@ -3316 +4800 @@
     pending.forEach((p) => p.reject(torndown));
     pending.clear();
-    featureDisposers.forEach((fn) => fn());
+    featureDisposers.forEach((fn) => {
+      try {
+        fn();
+      } catch (err) {
+        console.error("Squishify: a feature disposer threw during teardown", err);
+      }
+    });
     queue.forEach((item) => {
       URL.revokeObjectURL(item.url);
@@ -3345 +4835 @@
   renderQueue();
   startEmptyTipRotation();
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => rootEl.classList.remove("sqfy-booting"));
+  });
+  const batchTabProviders = [];
   const featureApi = {
     root: rootEl,
@@ -3370 +4864 @@
     defaultSettings: () => defaultSettings(),
     el: $,
+    // Report that this feature's tool was opened (see noteToolUsed above).
+    // Feature modules call this rather than reaching for config themselves so
+    // the "WordPress cannot call out" guarantee has exactly one enforcement
+    // point instead of one per feature.
+    noteToolUsed: (tool) => noteToolUsed(tool),
     getCurrentItem: () => queue.find((i) => i.id === currentId) || null,
     eachItem: (fn) => queue.forEach(fn),
+    // EVERY per-item edit on EVERY item, put back. The grid's card resets are
+    // card-scoped by construction — Format resets settings, Size clears
+    // resize, and so on — which means any feature without a card is
+    // unreachable from this mode. Upscale was the first to fall in that hole
+    // (a preset can auto-apply it across the queue, and nothing in the grid
+    // could take it off again), and registerReset is a general extension
+    // point, so the next feature to use one would have landed there too.
+    // This runs the providers instead of naming the features, so it cannot go
+    // stale. Same body as the editor's own heading Reset, per item.
+    // Deliberately per-ITEM only. The global dials are the Format card's
+    // business and the panel resets that separately — this is the half no
+    // card owns.
+    resetAllItems: () => {
+      queue.forEach((item) => {
+        item.resize = null;
+        resetProviders.forEach((p) => {
+          if (p.has(item)) p.clear(item);
+        });
+      });
+      renderQueue();
+    },
     // Count only, without handing out the array. Used to decide whether
     // navigating away would cost the user work — note the queue can be
@@ -3378 +4898 @@
     // is not a substitute for asking this.
     queueLength: () => queue.length,
+    // Run an async job over a set of items, one at a time, behind the same
+    // progress modal commitAll uses. Exported because a Pro feature can now
+    // start real per-image work from the batch panel (Upscale is the first),
+    // and twenty full-size resamples fired in one frame is the freeze that
+    // queueThumbJob was introduced to stop — except this one has no
+    // thumbnail spinner standing in for it, so it needs the modal.
+    // Failures are swallowed per item, deliberately: one image that cannot
+    // be processed must not abandon the other nineteen.
+    runBatchJob: async (items, fn) => {
+      if (!items.length) return;
+      let done = 0;
+      openApplyProgress(items.length);
+      try {
+        for (const item of items) {
+          try {
+            await fn(item);
+          } catch (e) {
+            console.error("Squishify batch job failed for", item.name, e);
+          }
+          done++;
+          updateApplyProgress(done, items.length);
+        }
+      } finally {
+        setTimeout(closeApplyProgress, 500);
+      }
+    },
     // Re-running selection on the current item is the sanctioned "refresh
     // everything" path — it replays the full pipeline (providers, listeners,
@@ -3390 +4936 @@
     requestEncode: scheduleEncode,
     refreshQueue: renderQueue,
+    // Coalesced sibling of refreshQueue, for async completions arriving in a
+    // burst. Use it from anything that lands off a decode or an encode.
+    scheduleQueueRefresh,
+    // Runs `fn(done)` with at most one thumbnail job in flight across the
+    // whole app, yielding a frame between them. Raise item.thumbBusy BEFORE
+    // queueing so the spinner appears at the moment of the edit rather than
+    // when the work reaches the front. See the thumbnail work queue above.
+    queueThumbJob,
     refreshControls: () => updateEffortControl(),
     addFiles,
@@ -3424 +4978 @@
     getBaseURL: (item) => baseURLFor(item),
     getOriginalURL: (item) => originalURLFor(item),
+    // Apply one max-width to the WHOLE queue — the Resize modal's
+    // apply-to-all, reachable without a modal or a current image. Same
+    // semantics deliberately: `null` clears, and every item takes the same
+    // { value, unit } so the batch stays one decision.
+    applyResizeToAll: (resize) => {
+      queue.forEach((item) => {
+        item.resize = resize ? { ...resize } : null;
+      });
+      updateResizeEntryButton();
+      renderQueue();
+      scheduleEncode();
+    },
+    // Mount a piece of chrome — an upgrade badge, a trial countdown, the site
+    // menu — wherever THIS host keeps its chrome. The header slot when there
+    // is a header, the empty-state corner when there is not (#52, spec §2.4).
+    //
+    // Core owns the choice rather than each feature module making it, because
+    // the WordPress free plugin mounts the same upsell badge (src/wp/main.js)
+    // on a surface whose header is the overlay's own and therefore has no
+    // core header slot. One branch here beats the same branch in three
+    // modules, and no module has to know which host it is running on.
+    //
+    // `position` preserves the ordering the corner had: badges to the start,
+    // the menu to the end, so the menu stays rightmost whichever order the
+    // two happen to mount in.
+    mountChrome: (el, position = "start") => {
+      const host = $("appHeaderSlot") || $("emptyStateCorner");
+      if (!host) return;
+      if ("end" === position) host.appendChild(el);
+      else host.prepend(el);
+    },
+    // Contribute a tab to batch mode's settings panel. `{ id, label, mount }`
+    // for a real one, `{ id, label, locked: true, onClick }` for the free
+    // tier's upsell — a locked tab does not switch, because there is nothing
+    // behind it to show.
+    registerBatchTab: (tab) => batchTabProviders.push(tab),
     registerItemBadge: (fn) => itemBadgeProviders.push(fn),
-    registerItemThumb: (fn) => itemThumbProviders.push(fn),
+    // stage 'source' (default) answers "which pixels is this a thumbnail of"
+    // — crop. stage 'transform' is handed that answer and returns a restyled
+    // version of it — tone. See thumbSrcFor.
+    registerItemThumb: (fn, { stage: stage2 = "source" } = {}) => itemThumbProviders.push({ fn, stage: stage2 }),
     // A fresh copy of the queue row's thumbnail (badges included) for any
     // feature that needs to show an item OUTSIDE the rail — rename's manual
@@ -3432 +5025 @@
     getThumbWrap: (item) => buildThumbWrap(item),
     registerRowDecorator: (fn) => rowDecorators.push(fn),
+    // The grid's counterpart. Separate from registerRowDecorator rather than
+    // one hook over both, because a rail row and a batch tile are different
+    // shapes: a decorator that inserts a grip at the start of a horizontal
+    // row is wrong on a square tile, and pretending otherwise would push the
+    // difference into every feature that registers.
+    registerTileDecorator: (fn) => tileDecorators.push(fn),
     registerReset: (p) => resetProviders.push(p),
     moveItem: (id, toIndex) => moveItem(id, toIndex),
@@ -3447 +5046 @@
     // (msg, 'success' | 'error' | 'info') — the prominent centered
     // variant; falls back to the pill when a modal is already up.
-    centerToast: showCenterToast
+    centerToast: showCenterToast,
+    // Whether this session can ever hold more than one image — host shape
+    // only, not the current queue count. A feature offering "apply to all"
+    // has nothing to offer when this is false.
+    batchCapable: () => batchCapable()
   };
   (config.pro && config.pro.features || []).forEach((feature) => {
@@ -3457 +5060 @@
     if (typeof dispose === "function") featureDisposers.push(dispose);
   }
+  batchPanel = createBatchPanel(featureApi, {
+    cardsEl: $("batchCards"),
+    toolsEl: $("batchTools"),
+    extraTabs: batchTabProviders
+  });
   const warmupTimer = setTimeout(() => {
     if (destroyed || loadedCodecs.has(settings.format) || pending.size > 0 || queue.length > 0) return;
@@ -3462 +5070 @@
       const fmt = settings.format;
       codecEncode(fmt, new ImageData(1, 1), buildOptions(fmt, settings.quality, effortFor(fmt)), true).then(() => {
-        if (codecStatusEl.textContent.startsWith("Loading")) {
-          codecStatusEl.textContent = `${FORMAT_LABELS[fmt]} codec ready.`;
-        }
+        if (codecStatusEl.textContent.startsWith("Loading")) codecStatusEl.textContent = "";
       }).catch(() => {
       });
@@ -3568 +5174 @@
     const worker = new Worker(new URL(
       /* @vite-ignore */
-      "" + new URL("assets/encode.worker-CNcBUqEy.js", import.meta.url).href,
+      "" + new URL("assets/encode.worker-BqxZ11_8.js", import.meta.url).href,
       import.meta.url
     ), { type: "module" });
@@ -3589 +5195 @@
       <img src="${logoLockupUrl}" alt="Squishify">
     </span>
+    <div class="sqfy-overlay-center sqfy-app"></div>
     <button type="button" class="sqfy-return-btn">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
@@ -3616 +5223 @@
     hideQueue: !!opts.hideQueue,
     logoUrl: logoLockupUrl,
+    // This host builds its own header (above), so core renders none and has
+    // nowhere to put header-level controls unless it is handed the place.
+    headerSlot: header.querySelector(".sqfy-overlay-center"),
     // The overlay header above the app already carries the logo — no need to
     // repeat it in the single-image file heading.
@@ -3634 +5244 @@
       // optimize-first phrasing is kept — it's the plugin's differentiator
       // (docs/features/active/pro-discovery-spec.md).
-      privacyNote: "<strong>Free forever.</strong> Optimize first, upload second — images are processed locally in your browser and only reach your site when you click Upload.",
+      privacyNote: '<strong>Free forever.</strong> <span class="privacy-rest">Optimize first, upload second — images are processed locally in your browser and only reach your site when you click Upload.</span>',
       step3Title: "Upload &amp; go!",
       step3Desc: "Send your optimized images straight to the Media Library.",
@@ -3764 +5374 @@
 const X_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>';
 const BACK_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>';
-const PLAY_ICON = '<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke-linejoin="round"/></svg>';
+const PLAY_ICON$1 = '<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke-linejoin="round"/></svg>';
 const LOCKED_ENTRIES = [
-  { key: "boost", label: "Boost" },
+  { key: "boost", label: "Upscale" },
   { key: "presets", label: "Presets" },
-  { key: "tone", label: "Tone" }
+  { key: "tone", label: "Color" }
 ];
 const FEATURE_LIST = [
-  { key: "boost", title: "Image Boost — get an undersized source up to the size you need" },
-  { key: "presets", title: "Presets" },
-  { key: "tone", title: "Tone — one look across the whole batch" },
-  { key: "quickprocess", title: "Quick Process — confirm a recipe once, then just drop and go" },
+  { key: "boost", title: "Upscale", sub: "Enlarge undersized images" },
+  { key: "presets", title: "Presets", sub: "Popular recipes" },
+  { key: "tone", title: "Color", sub: "Colorize and adjust" },
+  { key: "quickprocess", title: "Quick Process", sub: "Skip the UI, batch process" },
   { key: "reorder", title: "Drag-and-drop queue reordering (sets rename numbering)" },
   { key: "session", title: "Session autosave &amp; recovery" }
@@ -3845 +5455 @@
         return entry;
       });
+      if (api.registerBatchTab) {
+        api.registerBatchTab({
+          id: "boost",
+          label: "Upscale",
+          pro: true,
+          locked: true,
+          order: "start",
+          onClick: () => openModal(hasDemo("boost") ? "boost" : "overview")
+        });
+        api.registerBatchTab({
+          id: "presets",
+          label: "Presets",
+          pro: true,
+          locked: true,
+          order: "start",
+          onClick: () => openModal(hasDemo("presets") ? "presets" : "overview")
+        });
+        api.registerBatchTab({
+          id: "color",
+          label: "Color",
+          pro: true,
+          locked: true,
+          onClick: () => openModal(hasDemo("tone") ? "tone" : "overview")
+        });
+      }
       const backdrop = document.createElement("div");
       backdrop.className = "modal-backdrop sqfy-upsell-backdrop";
@@ -3858 +5493 @@
           <div class="sqfy-upsell-view" data-view="overview">
             <p class="sqfy-upsell-desc">
-              Squishify is free forever — batch, resize, convert, and optimize
-              as much as you like. Pro adds more ways to prep your assets, not
-              more capacity.
+              Squishify is free forever — batch, crop, resize, rename, convert
+              and optimize as much as you like. Pro adds more ways to prep your
+              assets, not more capacity.
             </p>
 
             ${FEATURE_LIST.some((f) => hasDemo(f.key)) ? `<div class="sqfy-upsell-features">
               ${FEATURE_LIST.filter((f) => hasDemo(f.key)).map(
-        (f) => `<button class="sqfy-upsell-feature-card" type="button" data-demo="${f.key}"><b>${f.title}</b><span class="sqfy-upsell-feature-see">See it</span></button>`
+        (f) => `<button class="sqfy-upsell-feature-card" type="button" data-demo="${f.key}"><b>${f.title}</b>${f.sub ? `<span class="sqfy-upsell-feature-sub">${f.sub}</span>` : ""}<span class="sqfy-upsell-feature-see">See it</span></button>`
       ).join("")}
             </div>` : ""}
@@ -3886 +5521 @@
           <div class="sqfy-upsell-view" data-view="${key}" hidden>
             <div class="sqfy-upsell-media" data-media-for="${key}">
-              <div class="sqfy-upsell-media-placeholder">${PLAY_ICON}</div>
+              <div class="sqfy-upsell-media-placeholder">${PLAY_ICON$1}</div>
             </div>
             <h4 class="sqfy-upsell-demo-title">${d.title}</h4>
@@ -4009 +5644 @@
       emptyBadge.type = "button";
       emptyBadge.textContent = "Squishify Pro";
-      api.el("emptyStateCorner").prepend(emptyBadge);
+      api.mountChrome(emptyBadge, "start");
       emptyBadge.addEventListener("click", () => openModal("overview"));
       const promo = document.createElement("div");
       promo.className = "sqfy-upsell-promo";
-      promo.innerHTML = `Do more with <b>Squishify Pro</b> — presets, Tone,
+      promo.innerHTML = `Do more with <b>Squishify Pro</b> — presets, Color,
         Quick Process, and queue reordering for common assets.
         <button class="sqfy-upsell-promo-link" type="button">Learn more</button>`;
@@ -4029 +5664 @@
         label.remove();
         entries.forEach((el) => el.remove());
-        emptyWrap.remove();
+        emptyBadge.remove();
         promo.remove();
         backdrop.remove();
@@ -4037 +5672 @@
 }
 const CHECK_ICON = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+const PLAY_ICON = '<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M10 8.5v7l6-3.5-6-3.5Z" fill="currentColor" stroke="none"/></svg>';
 const STORAGE_KEY = "sqfy.whatsNewSeen";
 function parseVersion(v) {
@@ -4068 +5704 @@
   ).join("");
 }
-function makeWhatsNewFeature({ currentVersion, entries = [], pro = false, returningVisitor = false }) {
+function openChangelogModal({ entries = [], pro = false, root = document }) {
+  const groups = entries.map((e) => ({ version: e.version, items: normalizeItems(e.items, pro) })).filter((e) => e.items.length > 0).reverse();
+  if (groups.length === 0) return null;
+  const backdrop = document.createElement("div");
+  backdrop.className = "modal-backdrop sqfy-whatsnew-backdrop sqfy-changelog-backdrop";
+  backdrop.innerHTML = `
+    <div class="modal sqfy-whatsnew-modal sqfy-changelog-modal" role="dialog" aria-modal="true" aria-labelledby="sqfyChangelogTitle">
+      <h3 id="sqfyChangelogTitle">Changelog</h3>
+      <div class="sqfy-changelog-scroll">${groupsHTML(groups)}</div>
+      <button class="btn sqfy-whatsnew-close sqfy-changelog-close" type="button">Close</button>
+    </div>`;
+  root.appendChild(backdrop);
+  const previouslyFocused = document.activeElement;
+  const closeBtn = backdrop.querySelector(".sqfy-changelog-close");
+  closeBtn.focus();
+  function close() {
+    document.removeEventListener("keydown", onKeydown, true);
+    backdrop.remove();
+    if (previouslyFocused && previouslyFocused.focus) previouslyFocused.focus();
+  }
+  function onKeydown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      close();
+    }
+  }
+  document.addEventListener("keydown", onKeydown, true);
+  closeBtn.addEventListener("click", close);
+  backdrop.addEventListener("click", (e) => {
+    if (e.target === backdrop) close();
+  });
+  return close;
+}
+function buildMedia(host, name, mediaBase, label) {
+  const src = mediaBase + name + (name.includes(".") ? "" : ".mp4");
+  const isImage = /\.(avif|webp|png|jpe?g|gif)$/i.test(name);
+  let el;
+  if (isImage) {
+    el = document.createElement("img");
+    el.src = src;
+    el.alt = "";
+    el.decoding = "async";
+    el.setAttribute("aria-hidden", "true");
+  } else {
+    el = document.createElement("video");
+    el.muted = true;
+    el.loop = true;
+    el.autoplay = true;
+    el.playsInline = true;
+    el.src = src;
+    el.setAttribute("aria-label", label);
+  }
+  el.className = "sqfy-whatsnew-media-asset";
+  el.addEventListener("error", () => host.remove());
+  host.appendChild(el);
+}
+function highlightsHTML(highlights, mediaBase) {
+  return highlights.map(
+    (h, i) => `
+      <li>
+        <span class="sqfy-whatsnew-check">${CHECK_ICON}</span>
+        <div class="sqfy-whatsnew-body">
+          <span>${h.text}${h.pro ? ' <span class="sqfy-whatsnew-tag">Pro</span>' : ""}</span>
+          ${h.media && mediaBase ? `<div class="sqfy-whatsnew-media" data-media-for="${i}">
+                   <div class="sqfy-whatsnew-media-placeholder">${PLAY_ICON}</div>
+                 </div>` : ""}
+        </div>
+      </li>`
+  ).join("");
+}
+function displayLines(entry, pro) {
+  const highlights = entry.highlights && entry.highlights.length ? entry.highlights : entry.items;
+  return normalizeItems(highlights || [], pro);
+}
+function makeWhatsNewFeature({
+  currentVersion,
+  entries = [],
+  pro = false,
+  returningVisitor = false,
+  mediaBase = ""
+}) {
   return {
     init(api) {
@@ -4079 +5796 @@
         lastSeen = "0";
       }
-      const groups = entries.filter(
+      const entry = entries.filter(
         (e) => e.bump !== "Patch" && isNewer(e.version, lastSeen) && !isNewer(e.version, currentVersion)
-      ).map((e) => ({ version: e.version, items: normalizeItems(e.items, pro) })).filter((e) => e.items.length > 0);
-      if (groups.length === 0) {
+      ).reduce((best, e) => !best || isNewer(e.version, best.version) ? e : best, null);
+      const lines = entry ? displayLines(entry, pro) : [];
+      if (lines.length === 0) {
         localStorage.setItem(STORAGE_KEY, currentVersion);
         return;
@@ -4091 +5809 @@
         <div class="modal sqfy-whatsnew-modal" role="dialog" aria-modal="true" aria-labelledby="sqfyWhatsNewTitle">
           <h3 id="sqfyWhatsNewTitle">What's new</h3>
-          ${groupsHTML(groups)}
+          <div class="sqfy-whatsnew-version">v${entry.version}</div>
+          <ul class="sqfy-whatsnew-items">${highlightsHTML(lines, mediaBase)}</ul>
+          <button class="sqfy-whatsnew-changelog" type="button">View full changelog</button>
           <button class="btn accent sqfy-whatsnew-close" type="button">Got it</button>
         </div>`;
       api.root.appendChild(backdrop);
+      lines.forEach((h, i) => {
+        if (!h.media || !mediaBase) return;
+        const host = backdrop.querySelector(`[data-media-for="${i}"]`);
+        if (host) buildMedia(host, h.media, mediaBase, h.text.replace(/<[^>]*>/g, ""));
+      });
       function close() {
         localStorage.setItem(STORAGE_KEY, currentVersion);
@@ -4109 +5834 @@
       document.addEventListener("keydown", onKeydown, true);
       backdrop.querySelector(".sqfy-whatsnew-close").addEventListener("click", close);
+      backdrop.querySelector(".sqfy-whatsnew-changelog").addEventListener("click", () => {
+        const root = api.root;
+        close();
+        openChangelogModal({ entries, pro, root });
+      });
       backdrop.addEventListener("click", (e) => {
         if (e.target === backdrop) close();
@@ -4270 +6000 @@
         text: "The Pro feature tour now shows Image Boost, which never had a place in it before."
       }
+    ],
+    highlights: [
+      {
+        rank: 2,
+        text: "Crop is now free, on every version — web and WordPress."
+      }
+    ]
+  },
+  {
+    version: "1.4.2",
+    bump: "Patch",
+    items: [
+      {
+        text: 'The controls bar now offers two named paths instead of one button and a checkbox: "Next file" to keep reviewing image by image, and "Process all" to apply your settings to the whole queue and go straight to the summary.'
+      },
+      {
+        text: `Resize opens with "Apply resize to all images" already ticked when there's more than one image queued — untick it for a one-off. On a single image the option is hidden entirely.`
+      },
+      {
+        text: "Rename opens on Sequence when you have a batch queued, and on This image when you don't. Whichever mode you pick yourself is remembered."
+      },
+      {
+        text: "On the web app, per-image Download is hidden while you're working on a batch — Process all collects everything into one zip instead."
+      }
+    ]
+  },
+  {
+    version: "1.5.0",
+    bump: "Minor",
+    items: [
+      {
+        text: "Bulk mode: drop two or more images and Squishify opens on a grid of everything you queued, with batch settings underneath. Click any image to edit it on its own, and the Grid button brings you back."
+      },
+      {
+        text: "Batch settings apply to the whole queue at once — format, quality and effort, a max width, a crop ratio, and a numbered rename sequence."
+      },
+      {
+        text: "Batch crop is a ratio: pick 1:1, 4:3 or 16:9 and every image gets the largest centred window at that ratio. The thumbnails show the result."
+      },
+      {
+        text: "Pro: Color adjustments join the batch settings, so one set of values covers the whole queue.",
+        pro: true,
+        upsell: true
+      },
+      {
+        text: "New app header and footer: the logo, the menu and the privacy promise now stay put for the whole session instead of living in the queue panel."
+      },
+      {
+        text: "The queue panel is now part of editing a single image, so the empty state and the grid both use the full width."
+      },
+      {
+        text: "Crops now show in the queue thumbnails instead of only on the stage, and thumbnails are sharper."
+      },
+      {
+        text: "Thumbnails of transparent PNGs, WebP and AVIF no longer flatten to black."
+      },
+      {
+        text: 'The drop area now shows a folder instead of a cloud-upload icon. Nothing about how Squishify works has changed — your images have always been processed on your own device and never uploaded anywhere — but the old icon was the one symbol everyone reads as "this goes to a server", and it was saying the opposite of the truth.'
+      },
+      {
+        text: `Fixed: on some browsers, AVIF and PNG encodes could fail in the WordPress admin with a "multithreaded codec excluded" error. The plugin now always uses the codec builds it actually ships with, so it can't happen on any browser.`,
+        pro: false,
+        upsell: false
+      },
+      {
+        text: "Fixed: on the free WordPress plugin, uploading a batch to the Media Library announced the upload but never closed Squishify, and WordPress went on warning about unsaved work that had already been uploaded. The overlay now tears down and takes you to the Media Library as it always should have."
+      }
+    ],
+    highlights: [
+      {
+        rank: 1,
+        text: "New: Grid — drop a batch and see every image at once, with one set of settings underneath that covers all of them."
+      }
     ]
   }

squishify/tags/1.5.0/readme.txt

@@ -3 +3 @@
 Tags: image optimization, resize images, crop image, avif, webp
 Requires at least: 6.5
-Tested up to: 7.0
+Tested up to: 7.1
 Requires PHP: 7.4
-Stable tag: 1.4.0
+Stable tag: 1.5.0
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
-Batch-resize, crop, rename and compress a whole set of images at once, right in your browser — then upload only the finished files to your Media Library.
+Batch-resize, crop, rename and compress images right in your browser — then upload only the finished files to your Media Library.
 
 == Description ==
@@ -79 +79 @@
 == Changelog ==
 
+= 1.5.0 =
+* Bulk mode: drop two or more images and Squishify opens on a grid of everything you queued, with batch settings underneath. Click any image to edit it on its own, and the Grid button brings you back.
+* Batch settings apply to the whole queue at once — format, quality and effort, a max width, a crop ratio, and a numbered rename sequence.
+* Batch crop is a ratio: pick 1:1, 4:3 or 16:9 and every image gets the largest centred window at that ratio. The thumbnails show the result.
+* Pro: Color adjustments join the batch settings, so one set of values covers the whole queue.
+* New app header and footer: the logo, the menu and the privacy promise now stay put for the whole session instead of living in the queue panel.
+* The queue panel is now part of editing a single image, so the empty state and the grid both use the full width.
+* Crops now show in the queue thumbnails instead of only on the stage, and thumbnails are sharper.
+* Thumbnails of transparent PNGs, WebP and AVIF no longer flatten to black.
+* The drop area now shows a folder instead of a cloud-upload icon. Nothing about how Squishify works has changed — your images have always been processed on your own device and never uploaded anywhere — but the old icon was the one symbol everyone reads as "this goes to a server", and it was saying the opposite of the truth.
+* Fixed: on some browsers, AVIF and PNG encodes could fail in the WordPress admin with a "multithreaded codec excluded" error. The plugin now always uses the codec builds it actually ships with, so it can't happen on any browser.
+* Fixed: on the free WordPress plugin, uploading a batch to the Media Library announced the upload but never closed Squishify, and WordPress went on warning about unsaved work that had already been uploaded. The overlay now tears down and takes you to the Media Library as it always should have.
+
+= 1.4.2 =
+* The controls bar now offers two named paths instead of one button and a checkbox: "Next file" to keep reviewing image by image, and "Process all" to apply your settings to the whole queue and go straight to the summary.
+* Resize opens with "Apply resize to all images" already ticked when there's more than one image queued — untick it for a one-off. On a single image the option is hidden entirely.
+* Rename opens on Sequence when you have a batch queued, and on This image when you don't. Whichever mode you pick yourself is remembered.
+* On the web app, per-image Download is hidden while you're working on a batch — Process all collects everything into one zip instead.
+
 = 1.4.0 =
 * Crop is now free, on every version — web and WordPress. Drag a frame or lock it to a ratio and type exact output dimensions, on one image or across the whole batch. It used to be part of Pro; it isn't any more, and nothing about it was cut down on the way.

squishify/tags/1.5.0/squishify.php

@@ -4 +4 @@
  * Plugin URI:        https://squishify.app/wordpress
  * Description:       Optimize first, upload second. Batch-compress, convert, and resize images in your browser — the full-size originals never hit your server — then upload the finished files straight into the Media Library.
- * Version:           1.4.0
+ * Version:           1.5.0
  * Requires at least: 6.5
  * Requires PHP:      7.4
@@ -18 +18 @@
 }
 
-define( 'SQUISHIFY_VERSION', '1.4.0' );
+define( 'SQUISHIFY_VERSION', '1.5.0' );
 define( 'SQUISHIFY_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
 define( 'SQUISHIFY_PLUGIN_URL', plugin_dir_url( __FILE__ ) );

squishify/trunk/assets/squishify-wp.css

@@ -46 +46 @@
     --sans: -apple-system, "Segoe UI", ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;
 
+    /* The viewport budget for the app's OWN chrome, spent by #imgOriginal's
+       max-height so the compare panes can't outgrow the stage. 340px is the
+       long-standing figure for the file heading, controls bar and paddings;
+       #52's footer adds ~44px on every surface, and the header adds ~52px
+       more on the hosts that render one — which is exactly what the :has()
+       below is asking. --sqfy-vh-offset stays what it always was: extra
+       chrome a HOST shell adds outside the app (the WP overlay's header). */
+    --sqfy-app-chrome: 384px;
+
     background:var(--bg);
     color:var(--text);
@@ -72 +81 @@
   }
 
-  /* ---------- sidebar brand heading ---------- */
+  /* A host that renders the core header spends 52px more of the viewport on
+     chrome. Asking the DOM rather than threading another config flag through
+     four adapters: the header is present iff the host supplied brandHTML, so
+     the markup already IS the answer. */
+  .sqfy-app:has(.app-header){ --sqfy-app-chrome: 436px; }
+
+  /* ---------- app header (#52) ---------- */
+  /* Exists only when the host supplied brandHTML (template.js). Modelled on
+     the WordPress overlay's own 48px header, which has been doing this job on
+     the other surface all along — logo left, tier badge and menu right, for
+     the whole session. Web used to keep its identity in the queue rail, so it
+     was the one surface that lost its logo halfway through a job. */
+  /* THREE TRACKS, NOT FLEX WITH A SPACER. The centre one holds the view
+     switch, and a centred control has to be centred on the HEADER — with
+     flex it would centre on whatever room the brand and the chrome slot left
+     over, so it would drift sideways as a trial countdown appeared or a
+     wordmark changed width. Equal outer tracks pin it to the real middle and
+     make the brand's left edge and the chrome's right edge independent of
+     each other. minmax(0,…) so a long brand shrinks instead of overflowing. */
+  .sqfy-app .app-header{
+    flex:none;
+    display:grid;
+    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items:center;
+    gap:14px;
+    height:52px;
+    padding:0 18px;
+    background:var(--surface);
+    border-bottom:1px solid var(--border);
+  }
+  .sqfy-app .app-header-center{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    min-width:0;
+  }
+  .sqfy-app .app-header-slot{
+    display:flex;
+    align-items:center;
+    justify-content:flex-end;
+    gap:8px;
+    min-width:0;
+  }
+
+  /* ---------- the view switch (roadmap #51) ---------- */
+  /* Same segmented-control vocabulary as rename's mode switcher — inset track,
+     transparent segments, --select-tint/--select-ink on the active one. That
+     pair exists precisely so "this one is active" looks the same wherever the
+     app says it, and a second treatment here would make two controls that do
+     the same job look like two different kinds of thing.
+     Scoped under .sqfy-app like everything else, which is why config.headerSlot
+     has to sit inside that scope on hosts that own their header (app.js). */
+  .sqfy-app .view-switch{
+    display:flex;
+    gap:3px;
+    padding:3px;
+    background:var(--surface-2);
+    border:1px solid var(--border);
+    border-radius:var(--radius-pill);
+  }
+  .sqfy-app .view-switch-btn{
+    display:inline-flex;
+    align-items:center;
+    gap:6px;
+    padding:6px 14px;
+    border:0;
+    border-radius:var(--radius-pill);
+    background:transparent;
+    color:var(--text-dim);
+    font:inherit;
+    font-size:0.82rem;
+    font-weight:600;
+    white-space:nowrap;
+    cursor:pointer;
+    transition:background .12s ease, color .12s ease;
+  }
+  .sqfy-app .view-switch-btn:hover{ color:var(--text); }
+  .sqfy-app .view-switch-btn.active{
+    background:var(--select-tint);
+    color:var(--select-ink);
+    /* The active segment is where you ARE, not somewhere to go. */
+    cursor:default;
+  }
+  .sqfy-app .view-switch-btn:focus-visible{
+    outline:2px solid var(--purple);
+    outline-offset:-2px;
+  }
+  @media (max-width: 620px){
+    /* The glyphs carry it below this — two words plus two icons plus a brand
+       plus the chrome slot is more than a 48px bar holds, and grid/single is
+       the one distinction a picture makes on its own. */
+    .sqfy-app .view-switch-btn span{ display:none; }
+    .sqfy-app .view-switch-btn{ padding:6px 10px; }
+  }
+
+  /* The brand lockup — horizontal now that it sits in a header rather than
+     stacked at the top of a 310px column. */
   .sqfy-app .brand-heading{
     display:flex;
-    flex-direction:column;
-    gap:8px;
-    padding:24px 16px;
-    border-bottom:1px solid var(--border);
+    align-items:center;
+    gap:12px;
+    min-width:0;
   }
   .sqfy-app .brand-heading .brand-mark{
-    width:80%; height:auto;
+    height:24px;
+    width:auto;
     display:block;
     object-fit:contain;
-    margin: 0 auto;
+    flex:none;
   }
   .sqfy-app .brand-heading .sub{
     font-size:0.78rem;
-    line-height:1.35;
+    line-height:1.2;
     color:var(--text-dim);
-    text-align:center;
-    text-wrap:balance;
+    /* The tagline is the first thing to go when the header gets tight: the
+       logo identifies, the tagline explains, and on a narrow window the
+       controls to the right have the stronger claim on the space. */
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    min-width:0;
+    padding-left:12px;
+    border-left:1px solid var(--border);
+  }
+
+  /* ---------- app footer (#52) ---------- */
+  /* The promise on the left, the host's own links on the right. Rendered on
+     every surface, because the promise matters on every surface — and because
+     it is now the ONLY copy of it. */
+  .sqfy-app .app-footer{
+    flex:none;
+    display:flex;
+    align-items:center;
+    gap:16px;
+    padding:11px 18px;
+    background:var(--surface);
+    border-top:1px solid var(--border);
+  }
+  /* Allowed to shrink. It inherited flex:none from its old life as the rail's
+     bottom corner, where nothing competed for the width — in a footer beside
+     the site links that meant the two simply overflowed the bar together
+     below about 1080px instead of giving anything up. */
+  .sqfy-app .app-footer .privacy-note{ flex:0 1 auto; min-width:0; }
+  .sqfy-app .app-footer-slot{
+    display:flex;
+    align-items:center;
+    flex:none;
+    min-width:0;
+  }
+  /* THE FOOTER GIVES THINGS UP IN ORDER, LEAD LAST. The lead ("Free forever"
+     / "Private by design") is the claim and it survives every width; the rest
+     of the sentence is the evidence for it. So the tail goes first, at the
+     width where the two halves stop fitting side by side. */
+  @media (max-width: 1100px){
+    .sqfy-app .app-footer .privacy-rest{ display:none; }
+  }
+  /* THE LINKS DO NOT GO. They used to be dropped here on the same reasoning —
+     the header menu carries the same pages, so the footer copy is one route
+     among two — but that reasoning was about a footer that had to fit ONE
+     LINE. Below this width it does not have to: the page scrolls on mobile,
+     so the footer can be two rows and keep everything (Xavier, 2026-08-31).
+     A row of links at the true bottom of a scrolling page is also the shape
+     every site has, which is where someone goes looking for them.
+     .made-by-menu already wraps at 900px (web.css), so a narrow screen gets
+     them on as many lines as it needs rather than one that overflows. */
+  @media (max-width: 680px){
+    .sqfy-app .app-footer{
+      flex-direction:column;
+      align-items:flex-start;
+      gap:9px;
+      padding:12px 16px 14px;
+    }
+    /* Full width so the centred nav inside it centres on the FOOTER rather
+       than on its own content box, which flex-start would have shrunk to the
+       longest line. */
+    .sqfy-app .app-footer-slot{ width:100%; justify-content:center; }
+  }
+  /* Collapses to nothing when the host leaves it alone (both WordPress
+     builds), so it costs no gap there. */
+  .sqfy-app .app-footer-slot:empty{ display:none; }
+
+  @media (max-width: 900px){
+    .sqfy-app .app-header{ height:48px; padding:0 12px; gap:10px; }
+    /* Below this the logo alone carries identity; the tagline would take the
+       whole bar. */
+    .sqfy-app .brand-heading .sub{ display:none; }
+    .sqfy-app .app-footer{
+      gap:12px;
+      padding:11px 16px;
+    }
   }
   .sqfy-app .topbar-stats{
@@ -143 +322 @@
 
   /* ---------- layout ---------- */
+  /* THE DEFAULT IS NO RAIL, and that is not a style preference — it is the
+     state the app actually boots in (empty queue), so it has to be what the
+     stylesheet paints before any JavaScript has run. The rail is added by
+     .sqfy-has-rail further down.
+     It was the other way round until 2026-08-31, with a 310px default that
+     .sqfy-no-rail then collapsed, and the result was that every cold load
+     painted a rail and animated it away — the whole editor column sliding
+     310px left over 260ms, on a screen nobody had interacted with yet. A
+     class can only ever describe the exception; if it describes the common
+     case, the first paint is wrong by construction. */
   .sqfy-app .layout{
     flex:1;
     display:grid;
-    grid-template-columns:310px 1fr;
+    grid-template-columns:0 1fr;
     min-height:0;
   }
@@ -173 +362 @@
        height to fill and .stage (overflow:hidden) collapses toward 0 without a
        floor — give it one, and let #imgOriginal size off a safe viewport slice
-       instead of the desktop-tuned 440px chrome offset. */
-    .sqfy-app .stage{ min-height:280px; }
-    .sqfy-app #imgOriginal{ max-height:calc(50vh - var(--sqfy-vh-offset, 0px)); }
+       instead of the desktop-tuned 440px chrome offset.
+
+       A *fixed* height, not just a floor. Sizing the stage to whatever the
+       image happened to need meant a landscape photo got a 229px stage on a
+       664px viewport — 34% of the screen — and the Original/Optimized badges
+       (absolute, top:16px) then sat 80px deep into the picture instead of
+       over empty checkerboard. A standard 65%-of-screen stage gives them room
+       at any aspect ratio and stops the editor resizing under you as you
+       move between queue items.
+
+       svh over vh on purpose: iOS resolves vh against the LARGE viewport (the
+       one with the address bar hidden), so 65vh is meaningfully more of the
+       screen than intended. The vh line stays first as the fallback
+       for anything without svh.
+
+       Both selectors below are deliberately one step more specific than the
+       base rules they override. `.sqfy-app .stage` and `.sqfy-app #imgOriginal`
+       are declared much further down this file at the SAME specificity, so the
+       plain selectors that used to be here lost on source order and this whole
+       block was dead — which is why the stage was image-driven and the 280px
+       floor never took. */
+    .sqfy-app .stage-wrap > .stage{
+      /* flex:none first, or the height is ignored regardless: .stage is a
+         column-flex child of .stage-wrap, where the base `flex:1` means
+         flex-basis:0% — and flex-basis beats height on the main axis. */
+      flex:none;
+      height:calc(65vh - var(--sqfy-vh-offset, 0px));
+      height:calc(65svh - var(--sqfy-vh-offset, 0px));
+      min-height:280px;
+    }
+    /* Viewport units rather than a percentage of the stage: the grid track
+       inside .stage-inner is content-sized, so a percentage max-height here
+       has no definite height to resolve against. The 32px keeps a 16px margin
+       top and bottom so the image never butts against the stage edge. */
+    .sqfy-app .stage #imgOriginal{
+      max-height:calc(65vh - var(--sqfy-vh-offset, 0px) - 32px);
+      max-height:calc(65svh - var(--sqfy-vh-offset, 0px) - 32px);
+    }
+
+    /* Last 28px of the badge overlap the taller stage didn't absorb. The image
+       is near full-bleed horizontally at this width, so there is no sideways
+       room to win — it has to come out of the badges' own height. Trimmed to
+       land just above where #imgOriginal's max-height now starts it.
+       (Same specificity trap as the stage rules: the base .stage-badge rules
+       are declared later in this file, so these need the extra step.) */
+    .sqfy-app .stage > .stage-badge{ top:10px; padding:7px 10px; }
+    .sqfy-app .stage > .stage-badge .value{ font-size:0.85rem; }
+
+    /* Crop toolbar: the specificity fix above gets the inputs back to 54px,
+       which alone drops this from five rows to two. These trim the rest —
+       every px of toolbar is a px of image the user can't see while framing
+       a crop. */
+    .sqfy-app .sqfy-crop-toolbar{
+      gap:6px;
+      padding:6px 8px;
+      bottom:8px;
+      max-width:calc(100% - 8px);
+    }
+    .sqfy-app .sqfy-crop-toolbar .btn{ padding:5px 11px; }
+    .sqfy-app .sqfy-crop-aspect{ padding:4px 8px; }
+    /* 16px is a functional floor, not a style choice: iOS Safari zooms the
+       whole page in when you focus an input smaller than that, and it does
+       not zoom back out. Width stays tight so the row still fits — the
+       larger type just fills the box it already had. */
+    .sqfy-app .sqfy-crop-size input[type="number"]{ font-size:16px; width:58px; }
+    /* Both separators flanking "Apply to all" survive the wrap as stray
+       vertical ticks at the start or end of a row. They earn their place on
+       one desktop row; here they just add noise and 3px each. */
+    .sqfy-app .sqfy-crop-sep{ display:none; }
     /* Download / Next file / Apply to all — stack full-width instead of the
        desktop's hug-content row, which left them small and left-aligned. */
@@ -204 +459 @@
     transition:border-color .15s ease, background .15s ease;
   }
+  /* `display:flex` above outranks the UA's [hidden] rule, and app.js hides
+     the rail's copy outright once the grid is offering intake instead. */
+  .sqfy-app .dropzone[hidden]{ display:none; }
   .sqfy-app .dropzone .dz-icon{ color:var(--text-faint); transition:color .15s ease; }
   .sqfy-app .dropzone.drag{
@@ -290 +548 @@
   /* The OS default scrollbar renders as a bright light-grey slab against this
      dark UI — loud enough that it reads as a component rather than chrome.
-     Both lists that can overflow get the same quiet treatment: the rail, and
+     Every surface that can overflow gets the same quiet treatment: the rail,
+     the batch grid (the rail's own contents in the other mode — a different
+     scrollbar there would say the two modes are different applications),
      rename's manual list (which is a list of queue rows, so a different
-     scrollbar there would look like a different kind of surface).
+     scrollbar there would look like a different kind of surface), and the
+     changelog modal's history (src/upsell/whats-new.css), which is the one
+     that scrolls on a dialog rather than in the layout — all the more
+     reason it can't be the loudest thing in the box.
+
+     One selector list rather than a copy per stylesheet: "quiet scrollbar"
+     is one decision, and three copies of it drift the moment the token
+     changes.
+
+     .sqfy-scroll is the opt-in version of the same thing, for surfaces core
+     cannot name: Pro's preset list is the first taker. It lives HERE rather
+     than being copied into pro.css because a second copy is a second thing to
+     forget when this changes, and a class name in a selector list costs a free
+     build nothing.
 
      Declared twice on purpose, not redundantly: scrollbar-color is the
@@ -299 +572 @@
      which is why the widths agree. */
   .sqfy-app .queue-list,
-  .sqfy-app .sqfy-rename-list{
+  .sqfy-app .batch-grid,
+  .sqfy-app .sqfy-scroll,
+  .sqfy-app .sqfy-rename-list,
+  .sqfy-app .sqfy-changelog-scroll{
     scrollbar-width:thin;
     scrollbar-color:var(--border-hover) transparent;
   }
   .sqfy-app .queue-list::-webkit-scrollbar,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar{
+  .sqfy-app .batch-grid::-webkit-scrollbar,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar{
     width:8px;
     height:8px;
   }
   .sqfy-app .queue-list::-webkit-scrollbar-track,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-track{
+  .sqfy-app .batch-grid::-webkit-scrollbar-track,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar-track,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-track,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar-track{
     background:transparent;
   }
   .sqfy-app .queue-list::-webkit-scrollbar-thumb,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-thumb{
+  .sqfy-app .batch-grid::-webkit-scrollbar-thumb,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar-thumb,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-thumb,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar-thumb{
     background:var(--border-hover);
     border-radius:var(--radius-pill);
@@ -322 +607 @@
   }
   .sqfy-app .queue-list::-webkit-scrollbar-thumb:hover,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-thumb:hover{
+  .sqfy-app .batch-grid::-webkit-scrollbar-thumb:hover,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar-thumb:hover,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-thumb:hover,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar-thumb:hover{
     background:var(--text-faint);
     background-clip:content-box;
@@ -330 +618 @@
      mobile rail, which scrolls horizontally. */
   .sqfy-app .queue-list::-webkit-scrollbar-corner,
-  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-corner{
+  .sqfy-app .batch-grid::-webkit-scrollbar-corner,
+  .sqfy-app .sqfy-scroll::-webkit-scrollbar-corner,
+  .sqfy-app .sqfy-rename-list::-webkit-scrollbar-corner,
+  .sqfy-app .sqfy-changelog-scroll::-webkit-scrollbar-corner{
     background:transparent;
   }
@@ -358 +649 @@
     margin:auto;
   }
+  /* ONE copy now, in the footer (#52). It used to render twice — the rail's
+     bottom corner plus a `.privacy-note-mobile` twin at the end of .layout,
+     with a display:none dance keeping the text out of the accessibility tree
+     twice, and an explicit `order` so the twin didn't float to the top of the
+     mobile stack. A footer that is a sibling of .layout is past .editor-panel
+     at every breakpoint, so all of that goes. */
   .sqfy-app .privacy-note{
     flex:none;
     display:flex;
     gap:9px;
-    padding:14px 16px;
-    border-top:1px solid var(--border);
     color:var(--text-dim);
     font-size:0.78rem;
     line-height:1.55;
+    min-width:0;
   }
   .sqfy-app .privacy-note .privacy-icon{
@@ -420 +716 @@
     border:1px solid var(--border);
   }
-  .sqfy-app .qitem .done-badge{
+  /* Every badge below is scoped to BOTH views. buildThumbWrap is one builder
+     (src/core/app.js) and this is one stylesheet for what it produces, so the
+     rail and batch mode's tiles cannot drift — the difference between them is
+     the thumb's fit and the tile's own layout, nothing else. Broadened for
+     #51; the offsets stay shared too, because the badges hang off the corners
+     of .thumb-wrap and that is true at 48px and at 200px alike. */
+  .sqfy-app :is(.qitem, .batch-tile) .done-badge{
     position:absolute; bottom:-4px; right:-4px;
     width:19px; height:19px;
@@ -431 +733 @@
     color:#07240f;
   }
+  /* .qitem ONLY. The grid deliberately carries no done state — see renderGrid
+     in app.js for the argument; the short version is that `done` is a checklist
+     mark and the grid is not a checklist. */
   .sqfy-app .qitem.done .done-badge{ display:flex; }
   /* Stale: finalized, but a later batch-wide edit moved its pixels, so its
@@ -451 +756 @@
     color:#3a2401;
   }
-  .sqfy-app .qitem .resize-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .resize-badge{
     position:absolute; top:-4px; left:-4px;
     width:17px; height:17px;
@@ -484 +789 @@
      isn't in a free bundle either, so the selector simply never matches
      and rename compacts up as if crop were absent — which it is. */
-  .sqfy-app .qitem .sqfy-rename-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .sqfy-rename-badge{
     position:absolute; top:34px; left:-4px;
     width:17px; height:17px;
@@ -495 +800 @@
     color:#fff;
   }
-  .sqfy-app .qitem .thumb-wrap:not(:has(.resize-badge)) .sqfy-rename-badge,
-  .sqfy-app .qitem .thumb-wrap:not(:has(.sqfy-crop-badge)) .sqfy-rename-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .thumb-wrap:not(:has(.resize-badge)) .sqfy-rename-badge,
+  .sqfy-app :is(.qitem, .batch-tile) .thumb-wrap:not(:has(.sqfy-crop-badge)) .sqfy-rename-badge{
     top:15px;
   }
-  .sqfy-app .qitem .thumb-wrap:not(:has(.resize-badge)):not(:has(.sqfy-crop-badge)) .sqfy-rename-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .thumb-wrap:not(:has(.resize-badge)):not(:has(.sqfy-crop-badge)) .sqfy-rename-badge{
     top:-4px;
   }
@@ -581 +886 @@
   .sqfy-app .sqfy-rename-seq-row{ display:flex; gap:12px; }
   .sqfy-app .sqfy-rename-seq-row .control{ flex:1; }
-  /* Native number spinners render as a pale grey slab on hover — the same
-     thing crop's size fields already strip (pro.css). Removed here for the
-     same reason, and because the two values behind them are typed far more
-     often than stepped: Start at is almost always 1, and Digits is
-     auto-computed from the queue and only overridden deliberately. */
+  /* Tabular figures so Start at and Digits don't shift width as they change.
+     The spinner-stripping that used to live here is now app-wide — see
+     input[type="number"] further down. */
   .sqfy-app .sqfy-rename-seq-row input[type="number"]{
-    -moz-appearance:textfield;
-    appearance:textfield;
     font-variant-numeric:tabular-nums;
-  }
-  .sqfy-app .sqfy-rename-seq-row input[type="number"]::-webkit-outer-spin-button,
-  .sqfy-app .sqfy-rename-seq-row input[type="number"]::-webkit-inner-spin-button{
-    -webkit-appearance:none;
-    margin:0;
   }
 
@@ -674 +970 @@
      the reason rename's block above moved on 2026-08-07: pro.css is loaded
      only by Pro bundles, so free users would otherwise get a fully working
-     but completely unstyled Crop. See docs/features/active/tier-reset-spec.md. */
+     but completely unstyled Crop. See docs/features/archive/tier-reset-spec.md. */
 
   /* ===== Crop mode (see docs/crop-spec.md) ===== */
@@ -701 +997 @@
      (resize sits at top:-4). When crop is the only badge, it takes resize's
      corner spot so a lone badge never floats mid-edge. */
-  .sqfy-app .qitem .sqfy-crop-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .sqfy-crop-badge{
     position:absolute; top:15px; left:-4px;
     width:17px; height:17px;
@@ -712 +1008 @@
     color:#fff;
   }
-  .sqfy-app .qitem .thumb-wrap:not(:has(.resize-badge)) .sqfy-crop-badge{
+  .sqfy-app :is(.qitem, .batch-tile) .thumb-wrap:not(:has(.resize-badge)) .sqfy-crop-badge{
     top:-4px;
   }
@@ -831 +1127 @@
     font-variant-numeric:tabular-nums;
   }
-  .sqfy-app .sqfy-crop-size input{
+  /* [type="number"] is load-bearing, not decoration: the generic
+     `.sqfy-app input[type="number"]` rule further down this file scores an
+     identical (0,2,1) to a bare `.sqfy-crop-size input`, so source order was
+     handing these inputs the app's standard 150px-wide, 11px-padded form
+     field. Two of those plus the × and the lock is ~330px, which is what wrapped
+     the toolbar onto five rows and buried the image on a phone. */
+  .sqfy-app .sqfy-crop-size input[type="number"]{
     width:54px;
     padding:5px 7px;
@@ -1045 +1347 @@
   }
 
+  /* The empty state carries one more block than it used to (#52): every host
+     now gets the dropzone, because the rail that used to hold one isn't here.
+     So the vertical budget is tighter — gap comes down from 5vw and the
+     bottom padding no longer reserves room for an absolutely-pinned tip that
+     is now in normal flow with everything else. */
+  /* The empty state's backdrop. TWO LAYERS IN ONE PROPERTY, deliberately,
+     rather than an ::before overlay: a positioned pseudo-element with a
+     z-index paints above the in-flow children it is supposed to sit behind,
+     and fixing that means giving the hero, the dropzone and the steps their
+     own stacking context each. A background can't have that problem.
+     The scrim is not optional. Everything on this screen is text on top of
+     the image — the title, the three steps, the tip — and it is the one
+     screen whose job is to be read. The gradient guarantees the contrast
+     whatever the photo does, so the image can be chosen for how it looks
+     rather than for how dark it is.
+     AVIF degrades correctly: a browser that cannot decode it (Safari before
+     16.4) drops the image layer and keeps the gradient, which is the flat
+     ground this screen had before. Nothing to detect, no fallback file.
+     background-attachment stays at its default `scroll`, which on a scroll
+     container means the image holds still while the content moves over it —
+     `local` would drag it along and read as a parallax nobody asked for. */
   .sqfy-app .empty-state{
     position:relative;
@@ -1052 +1375 @@
     justify-content:center;
     flex-direction:column;
-    gap:5vw;
+    gap:clamp(20px, 2.6vw, 44px);
     text-align:center;
-    padding:2.5vw 2.5vw 10vw 2.5vw;
+    padding:2.5vw;
+    overflow-y:auto;
+  }
+  /* HOSTS THAT OWN THE WHOLE PAGE ONLY. Keyed on the app header, which exists
+     if and only if the host passed config.brandHTML — and both WordPress
+     builds pass none, because their own overlay already has a header. That
+     makes this exactly the right question to ask: a full-bleed photo is
+     scene-setting for a site you arrived at, and inside a wp-admin modal it
+     would be decoration on someone else's screen. WordPress keeps the flat
+     ground (Xavier, 2026-08-31). */
+  .sqfy-app:has(.app-header) .empty-state{
+    /* SHAPED TO THE MEASUREMENTS, not to taste. Every line was sampled
+       against its worst-case (brightest) pixel across nine viewports from
+       375×812 to 2560×1440. The finding that set the shape: the scrim is
+       only needed at the TOP, and it is gone by 47% where the artwork is at
+       its best. The bottom third needs nothing — the image is near-black
+       there and the steps measure 16:1 untouched.
+       THE NUMBER IS SET BY THE WORST CROP, NOT THE TYPICAL ONE. `cover`
+       reframes the sky as the aspect changes: at 1440 the hero sits over
+       mid-picture, and at 2560 the same words sit over the top of the image,
+       which is its brightest region. A stop that measured comfortably at
+       1440 failed outright at 2560. */
+    background-image:
+      linear-gradient(180deg,
+        rgba(13,14,19,0.42) 0%,
+        rgba(13,14,19,0.38) 21%,
+        rgba(13,14,19,0.16) 34%,
+        rgba(13,14,19,0.00) 47%,
+        rgba(13,14,19,0.00) 100%),
+      url('./assets/empty-bg-rQTXw-s9.avif');
+    background-size:cover;
+    background-position:center;
+    background-repeat:no-repeat;
+  }
+  /* AND THE TYPE COMES UP TO MEET IT. --text-dim and --text-faint were tuned
+     against a flat surface, where a step down from white reads as hierarchy;
+     over a photograph the same step reads as low contrast, which is a
+     different thing entirely. So on this host the second line, the browse
+     hint and the drop icon go white and the dashed border goes to a white
+     alpha — the hierarchy moves into SIZE and WEIGHT, which a busy backdrop
+     cannot eat. Scoped to the empty state so the rail's own dropzone, which
+     still sits on a flat panel, keeps the original ramp. */
+  /* THE HEADLINE IS A LIGHTENED ORANGE ON THIS HOST, and the specific value
+     is a contrast decision rather than a style one. A colour's luminance caps
+     what it can ever reach, before any background gets a say: over pure black
+     the old purple #8b5cf6 tops out at 4.96:1 and --orange #ff7a45 at 8.12:1.
+     Over the bright top of this artwork at a 2560-wide crop that left purple
+     at 1.90:1 and --orange at 2.91:1 against the 3:1 large-text floor — and
+     --orange barely moved when the scrim was raised (2.84 → 2.91 for four
+     more points of alpha). Past a point you are darkening a photograph to
+     rescue a colour that has already spent its budget.
+     #ffad80 is --orange with the luminance raised from 0.36 to 0.53, which
+     measures 3.57:1 on that worst crop and 7.7:1 on a laptop — the brand
+     temperature kept, the ceiling raised, and the scrim left at 0.42 instead
+     of being pushed to 0.54 to compensate. Deliberately NOT --orange itself:
+     the token is the app's accent on flat dark panels, where it has all the
+     contrast it needs, and it should not be re-tuned for one photograph. */
+  .sqfy-app:has(.app-header) .empty-state .empty-title{ color:#ffad80; }
+  .sqfy-app:has(.app-header) .empty-state .empty-sub{ color:#fff; }
+  /* The step captions go with them, and this one was found by measuring
+     rather than by looking: on a phone the empty state is content-height and
+     scrolls, so the three steps sit in the MIDDLE of the artwork instead of
+     at its near-black foot. --text-dim measured 1.81:1 there against 5.89:1
+     on a desktop crop — the same colour, the same rule, a completely
+     different background under it. White holds at every height. */
+  .sqfy-app:has(.app-header) .empty-step p{ color:#fff; }
+  .sqfy-app:has(.app-header) .empty-drop .dz-sub{ color:#fff; }
+  .sqfy-app:has(.app-header) .empty-drop .dz-icon{ color:#fff; }
+  /* MOBILE KEEPS A FLOOR ALL THE WAY DOWN. On a phone the empty state is
+     content-height and scrolls, so `cover` on a narrow tall box shows a
+     vertical slice of the artwork and the content sits ON that slice rather
+     than on the composition the image was cropped for — the three steps land
+     across the bright middle instead of the near-black foot. Measured: the
+     step heading fell to 3.94:1 there while reading 16:1 on every desktop
+     crop. A gentle scrim from the midpoint down fixes it, and costs less here
+     than anywhere else precisely because a narrow crop is showing so little
+     of the picture to begin with. */
+  @media (max-width: 900px){
+    .sqfy-app:has(.app-header) .empty-state{
+      background-image:
+        linear-gradient(180deg,
+          rgba(13,14,19,0.50) 0%,
+          rgba(13,14,19,0.46) 18%,
+          rgba(13,14,19,0.24) 34%,
+          rgba(13,14,19,0.20) 55%,
+          rgba(13,14,19,0.22) 100%),
+        url('./assets/empty-bg-rQTXw-s9.avif');
+    }
+  }
+
+  /* THE DROPZONE CARRIES ITS OWN, and this is the one place the page-wide
+     gradient could not help. It sits at 38–42% of the height, which is
+     exactly the horizon — the brightest band in the artwork (luminance 0.23
+     against 0.01 at the foot of the page). Darkening the middle enough to fix
+     it would have meant darkening the middle, which is the half of the image
+     worth showing. A translucent panel inside the dashed border solves it
+     where it happens, and reads as what it is: a surface you are about to
+     drop something onto. Measured 3.47:1 → 5.5:1. */
+  .sqfy-app:has(.app-header) .empty-drop .dropzone{
+    background:rgba(13,14,19,0.22);
+    border-color:rgba(255,255,255,0.38);
+  }
+  .sqfy-app:has(.app-header) .empty-drop .dropzone:hover{ border-color:rgba(255,255,255,0.62); }
+  /* Restated because the selector above outranks .dropzone.drag, which would
+     otherwise lose its highlight on this host alone. */
+  .sqfy-app:has(.app-header) .empty-drop .dropzone.drag{
+    border-color:var(--purple);
+    background:rgba(139,92,246,0.16);
   }
   /* Corner container for empty-state chrome (see template.js). Children
@@ -1142 +1572 @@
   .sqfy-app .empty-step:nth-child(2) .empty-step-num,
   .sqfy-app .empty-step:nth-child(3) .empty-step-num{ color:var(--purple); }
+  /* Down 15% from 150x96 (#52, Xavier). The empty state gained a dropzone —
+     every host has one now that the rail isn't there to carry it — and the
+     art is the block that can give up room without losing its job: it is
+     decoration for a step whose heading and sentence carry the meaning,
+     while the dropzone is the one thing on this screen you are meant to act
+     on. Both dimensions scale together so the SVGs keep their aspect. */
   .sqfy-app .empty-step-art{
     width:100%;
-    max-width:150px;
-    height:96px;
+    max-width:128px;
+    height:82px;
     object-fit:contain;
   }
@@ -1160 +1596 @@
     line-height:1.5;
   }
+  /* In normal flow at every width as of #52. It was absolutely pinned to
+     bottom:10% with a mobile exception putting it back in flow, and the extra
+     dropzone block above pushed the steps straight through it — the exception
+     had already worked out what the rule should be. */
   .sqfy-app .empty-tip{
-    position:absolute;
-    left:50%;
-    bottom:10%;
-    transform:translateX(-50%);
+    margin:0 auto;
     display:flex;
     align-items:center;
@@ -1172 +1609 @@
     width:420px;
     max-width:calc(100% - 5vw);
+    /* Tall enough for the longest tip in the rotation. The tips swap in place
+       on a timer, so a three-line one growing the box would push the whole
+       empty state up under a reader who is not looking at the tip at all. */
+    min-height:100px;
     text-align:left;
     padding:12px 16px;
@@ -1177 +1618 @@
     border-radius:12px;
     background:var(--surface-2);
-  }
-  /* Mobile: .empty-state is content-sized (page scrolls), so an absolute
-     bottom-pinned tip lands on top of the steps — put it in flow instead. */
-  @media (max-width: 900px){
-    .sqfy-app .empty-tip{
-      position:static;
-      transform:none;
-      margin:0 auto;
-    }
   }
   .sqfy-app .empty-tip svg{ flex:none; width:20px; height:20px; color:var(--purple); }
@@ -1298 +1730 @@
   .sqfy-app.sqfy-noqueue .queue-panel{ display:none; }
   .sqfy-app.sqfy-noqueue .layout{ grid-template-columns:1fr; }
-  /* The empty state's fallback dropzone — rendered only in this layout, where
-     it's the sole intake control, so it reads as the primary affordance
-     rather than the rail's quiet corner version. */
+  /* The empty state's dropzone. Rendered on every host as of #52, where it
+     used to be `hideQueue` only — the empty state has no rail now, so this
+     IS the intake, and it reads as the primary affordance rather than the
+     rail's quiet corner version. */
   .sqfy-app .empty-drop{ width:min(420px, 100%); }
   .sqfy-app .empty-drop .dropzone{ margin:0; padding:32px 20px; }
@@ -1321 +1754 @@
      branch; no logic changes needed. (Pro's equivalents: pro.css.) */
   .sqfy-app.sqfy-single .resize-applyall-row{ display:none; }
-  .sqfy-app.sqfy-single #applyAllRow{ display:none; }
+  /* Same UA-override reason as .action-group .btn[hidden] below: the row
+     is display:flex, so openResizeModal's hidden attribute needs help. */
+  .sqfy-app .resize-applyall-row[hidden]{ display:none; }
+  /* #applyAllRow retired 2026-08-30 — the controls bar's apply-to-all is a
+     button (#processAllBtn) that renderQueue hides on any queue of one, so
+     a single-image host needs no rule of its own here. */
   /* Rename's own apply-to-all affordance is no longer a checkbox to hide:
      v2 replaced it with the mode switcher, which rename.js hides directly
@@ -1513 +1951 @@
     grid-area:1 / 1;
     user-select:none;
+    /* pointer-events:none keeps these out of the way of the compare drag, but
+       it does NOT stop iOS's long-press-on-an-image sheet ("Save Image", "Copy")
+       — that runs off its own hit test. -webkit-touch-callout is what suppresses
+       it, and it matters here because the compare handle sits right on top of
+       the photo, so every slow drag is also a long press on an image. */
+    -webkit-touch-callout:none;
+    -webkit-user-select:none;
     pointer-events:none;
     max-width:none;
@@ -1518 +1963 @@
   .sqfy-app #imgOriginal{
     max-width:100%;
-    /* 340px is the viewport budget for the app's own chrome (heading, controls,
-       paddings), tuned on the standalone web page. --sqfy-vh-offset is any
-       EXTRA chrome a host shell adds around the app — the WP overlay sets it
-       to its header height. Without it, imgOriginal is allowed to be taller
-       than the stage, overflowing the grid cell that imgPreview (inset:0)
-       stretches to — which visibly misaligns the before/after comparison. */
-    max-height:calc(100vh - 340px - var(--sqfy-vh-offset, 0px));
+    /* Without this, imgOriginal is allowed to be taller than the stage,
+       overflowing the grid cell that imgPreview (inset:0) stretches to —
+       which visibly misaligns the before/after comparison. See
+       --sqfy-app-chrome at the top of this file for what the budget covers. */
+    max-height:calc(100vh - var(--sqfy-app-chrome) - var(--sqfy-vh-offset, 0px));
     min-height:160px;
   }
@@ -1564 +2007 @@
     box-shadow:0 2px 10px rgba(0,0,0,.4);
   }
+  /* This range input is pure input surface: every pixel the user actually
+     sees is drawn by .divider-line and .loupe-grip, positioned from its value
+     by updateRevealPosition(). It used to be hidden by making each part
+     transparent, which relies on `appearance:none` fully suppressing the
+     platform control — and mobile Safari does not honour that on the thumb.
+     A test user's phone rendered the 50px full-height thumb with its native
+     fill still on, so its two edges showed up flanking the purple divider as
+     the "three vertical lines" in the compare view (reported 2026-08-29).
+
+     opacity:0 settles it at a level no UA stylesheet can reach into: an
+     opacity:0 element still hit-tests and still receives pointer/touch events
+     (unlike visibility:hidden), so dragging is untouched, and the input stays
+     in the accessibility tree with its aria-label. The transparent
+     backgrounds below stay as well — belt and braces, and they keep the
+     element honest if the opacity is ever lifted for debugging. */
   .sqfy-app .reveal-range{
     position:absolute;
@@ -1572 +2030 @@
     appearance:none;
     background:transparent;
+    opacity:0;
     cursor:ew-resize;
-  }
-  .sqfy-app .reveal-range::-webkit-slider-runnable-track{ background:transparent; height:100%; }
-  .sqfy-app .reveal-range::-moz-range-track{ background:transparent; height:100%; }
+    /* pan-y, not none: a vertical swipe still scrolls the page (the mobile
+       layout scrolls, and the stage is a big chunk of it), but horizontal
+       movement is handed straight to this control instead of being held back
+       while the browser decides whether it was meant to be a scroll. Without
+       it the first few px of every drag are arbitration lag.
+       The callout/select/highlight suppressions are what stop a slow drag
+       turning into iOS's text-selection magnifier and share sheet. */
+    touch-action:pan-y;
+    -webkit-touch-callout:none;
+    -webkit-user-select:none;
+    user-select:none;
+    -webkit-tap-highlight-color:transparent;
+  }
+  .sqfy-app .reveal-range::-webkit-slider-runnable-track{ background:transparent; border:none; height:100%; }
+  .sqfy-app .reveal-range::-moz-range-track{ background:transparent; border:none; height:100%; }
+  /* 50px deliberately — it matches .loupe-grip so the thumb sits exactly under
+     the handle the user can see. Do not shrink it to buy positional accuracy:
+     the thumb IS the touch grab target. WebKit only enters drag mode when the
+     touch lands on the thumb; anywhere else on the track it sets the value and
+     stops, so the swipe that follows falls through to iOS's scroll/long-press
+     arbitration and the bar only moves if you press and hold (which then
+     summons the callout and magnifier instead). Tried 1px on 2026-08-29,
+     which is exactly what happened.
+
+     It does cost a little travel — a range maps pointer position across
+     `track width - thumb width`, so the value can't quite reach 0/100 from a
+     tap near either end. That only affects taps; a drag tracks the finger 1:1
+     from wherever it was grabbed. */
   .sqfy-app .reveal-range::-webkit-slider-thumb{
     -webkit-appearance:none;
+    appearance:none;
     width:50px; height:100%;
     background:transparent;
+    border:none;
+    box-shadow:none;
   }
   .sqfy-app .reveal-range::-moz-range-thumb{
@@ -1585 +2072 @@
     background:transparent;
     border:none;
+    box-shadow:none;
   }
 
@@ -1734 +2222 @@
   }
   .sqfy-app input[type="number"]{ width:150px; }
+  /* NO SPINNERS, ANYWHERE (Xavier, 2026-09-01). The native stepper is a pair
+     of 8px chevrons drawn in the platform's own light chrome, which on this
+     dark surface reads as a bright artefact stuck to the field — and it earns
+     nothing: every number here is typed rather than stepped, since a max width
+     is a decision (1600, not 1599 then 1600) and Start at is almost always 1.
+     Was scoped to rename's sequence row, which is only where it got NOTICED
+     first; the argument was never specific to that field. */
+  .sqfy-app input[type="number"]{
+    -moz-appearance:textfield;
+    appearance:textfield;
+  }
+  .sqfy-app input[type="number"]::-webkit-outer-spin-button,
+  .sqfy-app input[type="number"]::-webkit-inner-spin-button{
+    -webkit-appearance:none;
+    margin:0;
+  }
 
   .sqfy-app #formatControlWrap{ flex:1; min-width:200px; }
@@ -1775 +2279 @@
   .sqfy-app .spacer{ flex:1; }
   .sqfy-app .action-group{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
-  /* Apply-to-all leads the group so it reads as a modifier on what follows
-     rather than a third button. No margin trickery to separate it:
-     .action-group is content-width (it sits after .spacer's flex:1, and
-     wraps to its own row on narrow editors), so there is never free space
-     to push into — the gap alone carries the grouping. */
-  /* .checkbox-row sets display:flex, which beats the hidden attribute's UA
-     display:none — without this the row stays visible after renderQueue()
-     hides it on the last pending item. */
-  .sqfy-app .action-group .applyall-row[hidden]{ display:none; }
-
+  /* The group is [item action] [Next file] [Process all], left to right, in
+     rising commitment. No margin trickery separates them: .action-group is
+     content-width (it sits after .spacer's flex:1, and wraps to its own row
+     on narrow editors), so there is never free space to push into — the gap
+     alone carries the grouping. Every member is hidden by renderQueue via the
+     hidden attribute, and .btn sets display:inline-flex, which beats the
+     attribute's UA display:none — hence the rule below. */
+  .sqfy-app .action-group .btn[hidden]{ display:none; }
+
+  /* ON THE STAGE, BOTTOM LEFT. It carries two messages — a first-use codec
+     load and a worker crash — and both are rare and transient. As a row in
+     the editor column that left two bad options: reserve a blank line for the
+     whole session, or move the controls under the user's cursor the moment it
+     arrived. Floating over the stage it costs nothing and shifts nothing.
+     Same glass as the two stage badges above it, because it is the same kind
+     of thing — a note about the picture, drawn on the picture. pointer-events
+     off for the same reason they are: the whole stage is the loupe's drag
+     surface and nothing overlaid on it may take a drag. */
   .sqfy-app .codec-status-line{
-    font-size:0.8rem;
-    color:var(--text-faint);
-    min-height:17px;
-  }
+    position:absolute;
+    left:16px;
+    bottom:16px;
+    z-index:2;
+    max-width:calc(100% - 32px);
+    padding:7px 12px;
+    border-radius:var(--radius-sm);
+    background:rgba(13,14,19,0.72);
+    backdrop-filter:blur(6px);
+    -webkit-backdrop-filter:blur(6px);
+    border:1px solid var(--border);
+    font-size:0.78rem;
+    color:var(--text-dim);
+    pointer-events:none;
+  }
+  .sqfy-app .codec-status-line:empty{ display:none; }
 
   .sqfy-app .toast{
@@ -1817 +2341 @@
      over the image behind it. */
   .sqfy-app .center-toast{
-    position:fixed;
+    /* Absolute inside .editor-panel — see the note on .notice-toast below for
+       why both of these stopped guessing at the rail's width. */
+    position:absolute;
     top:50%; left:50%;
     transform:translate(-50%,-50%) scale(0.96);
@@ -1823 +2349 @@
     align-items:center;
     gap:12px;
-    max-width:min(460px, calc(100vw - 40px));
+    max-width:min(460px, calc(100% - 40px));
     padding:16px 22px;
     background:var(--surface-3);
@@ -1851 +2377 @@
     transform:translate(-50%,-50%) scale(1);
   }
-  /* Centered over the EDITOR column, not the page — page-centering reads
-     as misaligned next to the 310px queue column. Below 900px the layout
-     is single-column, so plain page-centering is correct there. Same
-     treatment as .notice-toast above. */
-  @media (min-width: 901px){
-    .sqfy-app .center-toast{ left:calc(50% + 155px); }
-  }
   /* Modal already on screen (the zip download fires from inside the
      finalize modal, every time) — sit at the top of the editor instead of
@@ -1894 +2413 @@
   /* centered notice card (working-size cap) — bigger moment than the pill */
   .sqfy-app .notice-toast{
-    position:fixed;
+    /* ABSOLUTE INSIDE .editor-panel, not fixed to the viewport (#52, spec
+       §2.5). Both centred alerts used to sit at `left: calc(50% + 155px)` —
+       hardcoded half the 310px rail — which was correct only while the rail
+       was a constant. #51 made it a variable and the notice ended up 155px
+       right of the editor's real centre in batch mode (measured).
+       The fix is not a better constant, it is not having one: centred on the
+       element, this is right whether the rail is up, sliding, or gone.
+       .editor-panel is already position:relative for .intake-loading's
+       curtain, and position:relative with no z-index creates no stacking
+       context, so the z-index ordering below is unchanged by the move. */
+    position:absolute;
     top:50%; left:50%;
     transform:translate(-50%,-50%);
     width:400px;
-    max-width:calc(100vw - 40px);
+    max-width:calc(100% - 40px);
     background:var(--surface-3);
     border:1px solid var(--border-hover);
@@ -1926 +2455 @@
     visibility:visible;
     pointer-events:auto;
-  }
-  /* Center over the EDITOR column, not the page — page-centering reads as
-     misaligned next to the 310px queue column. Below the 900px breakpoint
-     the layout is single-column, so plain page-centering is correct there. */
-  @media (min-width: 901px){
-    .sqfy-app .notice-toast{ left:calc(50% + 155px); }
   }
   .sqfy-app .notice-title{
@@ -2137 +2660 @@
     font-weight:600;
   }
+
+  /* ---------- shared batch fields (src/core/batch-panel.js) ---------- */
+  /* Used by BOTH bulk mode's settings panel and Quick Process's widget, which
+     is the whole reason these live in core rather than beside either one.
+     Everything else the fields need — .control, .quality-slider, .select-wrap
+     — they already inherit from the editor's own controls, so the form looks
+     like the app instead of like a form. */
+  .sqfy-app .batch-size-row,
+  .sqfy-app .batch-rename-row{
+    display:flex;
+    align-items:flex-end;
+    gap:8px;
+  }
+  .sqfy-app .batch-size-row input[type="number"],
+  .sqfy-app .batch-rename-row input[type="text"]{ flex:1; min-width:0; }
+  .sqfy-app .batch-size-row .select-wrap{ flex:none; width:74px; }
+  /* Start / Digits. Deliberately smaller and quieter than the prefix beside
+     them: the prefix is the decision, these two are adjustments to it. */
+  .sqfy-app .batch-subfield{
+    display:flex;
+    flex-direction:column;
+    gap:5px;
+    flex:none;
+    font-size:0.68rem;
+    letter-spacing:0.05em;
+    text-transform:uppercase;
+    color:var(--text-faint);
+    font-weight:700;
+  }
+  .sqfy-app .batch-subfield input{ width:64px; }
+  /* Live preview of what a rename sequence produces. Only appears once there
+     is something to show, so an untouched form keeps its height. */
+  .sqfy-app .sqfy-bf-hint{
+    margin:6px 0 0;
+    /* Always reserves its line (the text is toggled with visibility, not
+       hidden), so typing a prefix doesn't grow the panel under the cursor. */
+    min-height:1.2em;
+    font-size:0.75rem;
+    color:var(--text-dim);
+    font-family:var(--mono);
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  /* ---------- batch mode (roadmap #51) ---------- */
+  /* THE RAIL SLIDE. grid-template-columns is animatable, so the collapse is
+     one transition on the existing track rather than a transform — which
+     would leave the editor panel's width lying about itself for the length of
+     the animation and make the grid reflow at the end.
+     Deliberately NOT folded into .sqfy-noqueue below: that one is a boot-time
+     layout for hideQueue hosts and must stay instant, and a host that has no
+     rail must never acquire one it can then slide.
+     The argument for sliding it at all (spec §3.1, Xavier's call): the brand
+     lockup and the privacy note are PRE-ENGAGEMENT material. Someone who has
+     queued twelve images is past the point where "nothing gets uploaded" is
+     doing persuasive work and exactly at the point where horizontal room for
+     thumbnails is worth the most. The empty state — what an unconvinced
+     visitor actually sees — keeps every word of it. */
+  /* THE RAIL BELONGS TO ONE IMAGE (#52, app-shell-spec.md §2.1).
+     `sqfy-has-rail` is set by app.js only while you ARE looking at a single
+     image — queue non-empty, mode editor. The empty state and batch mode both
+     go without, so empty → grid moves nothing at all and empty → one image
+     slides it in once, when it is earned.
+     Deliberately NOT folded into .sqfy-noqueue: that one is a boot-time
+     layout for hideQueue hosts and must stay instant, and a host that has no
+     rail must never acquire one it can then slide.
+     Desktop only, and that is not a detail: below 900px .layout is already a
+     single column with the rail stacked ABOVE the editor, so there is no
+     column to collapse. */
+  @media (min-width: 901px){
+    .sqfy-app .layout{ transition:grid-template-columns .26s cubic-bezier(.4,0,.2,1); }
+    .sqfy-app.sqfy-has-rail .layout{ grid-template-columns:310px 1fr; }
+    .sqfy-app:not(.sqfy-has-rail) .queue-panel{
+      opacity:0;
+      pointer-events:none;
+      /* A zero-width grid track still lets its content spill unless it
+         clips. */
+      overflow:hidden;
+    }
+    .sqfy-app .queue-panel{ transition:opacity .16s ease; }
+    @media (prefers-reduced-motion: reduce){
+      .sqfy-app .layout,
+      .sqfy-app .queue-panel{ transition:none; }
+    }
+  }
+  /* NOTHING ANIMATES UNTIL THE APP HAS MOUNTED AND PAINTED ONCE (app.js adds
+     and then drops .sqfy-booting). Correct defaults are what stop a cold load
+     needing a correction at all; this stops any OTHER boot-time state — a Pro
+     session restored straight into the editor, say — from sliding its rail in
+     from nowhere. A transition is for a change the user caused. */
+  .sqfy-app.sqfy-booting .layout,
+  .sqfy-app.sqfy-booting .queue-panel{ transition:none; }
+  /* Below the breakpoint .layout is a single column with the rail stacked
+     ABOVE the editor, so there is no track to collapse — it just goes.
+     Nothing is lost by that now: the rail only appears when you are looking
+     at one image, and the states that hide it (empty, grid) both carry their
+     own intake. Before #52 this had to stay put, because the empty state's
+     only dropzone lived in the rail; without this rule the mobile empty state
+     showed the rail's dropzone stacked directly above the empty state's own. */
+  @media (max-width: 900px){
+    .sqfy-app:not(.sqfy-has-rail) .queue-panel{ display:none; }
+  }
+
+  /* Peer of .editor-content, and it inherits that element's whole box —
+     content on top, settings below — so the two modes read as the same
+     application rather than two screens. */
+  .sqfy-app .batch-mode{
+    flex:1;
+    display:flex;
+    flex-direction:column;
+    min-height:0;
+    padding:24px;
+    gap:16px;
+  }
+  /* One quiet line, centred, above the grid. It costs a row of vertical
+     space on every visit and earns it on touch, where the hover pill below
+     never fires. */
+  .sqfy-app .batch-hint{
+    margin:0;
+    flex:none;
+    text-align:center;
+    font-size:0.82rem;
+    color:var(--text-faint);
+  }
+  .sqfy-app .batch-grid{
+    flex:1;
+    min-height:0;
+    overflow-y:auto;
+    display:grid;
+    /* 200px, against the prototype's 148px. The prototype's own finding was
+       that twelve tiles at 148 left a lot of dead space in a desktop editor
+       column — and the tile's job here is to be legible enough to CHOOSE
+       from, which is also the argument for `contain` below. Bigger tiles, not
+       a capped centred grid: capping would fix the emptiness by narrowing the
+       working surface the rail just slid out to widen. */
+    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
+    gap:14px;
+    align-content:start;
+    /* 10px of side padding, not 2: the reorder drop marker is drawn 8px off
+       a tile's leading edge, and on the first column that lands outside the
+       scroll container's content box, where overflow clips it. */
+    padding:2px 10px;
+  }
+  .sqfy-app .batch-tile{
+    /* Positioned for the remove button in its corner. */
+    position:relative;
+    display:flex;
+    flex-direction:column;
+    gap:9px;
+    padding:10px;
+    border:1px solid var(--border);
+    border-radius:var(--radius);
+    background:var(--surface);
+    cursor:pointer;
+    font:inherit;
+    color:inherit;
+    text-align:left;
+    transition:border-color .12s ease, background .12s ease;
+  }
+  .sqfy-app .batch-tile:hover{ border-color:var(--border-hover); background:var(--surface-2); }
+  .sqfy-app .batch-tile:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+  /* THE ONLY STATE A TILE CARRIES. Marking the seventeen images that worked
+     tells you nothing you can use; marking the three that did not is the whole
+     job, and the grid is the only surface that can say which three. */
+  .sqfy-app .batch-tile.is-failed{ border-color:var(--orange-2); }
+  .sqfy-app .batch-tile.is-failed:hover{ border-color:var(--orange-2); }
+  .sqfy-app .batch-tile-failed{
+    position:absolute;
+    top:6px;
+    left:6px;
+    z-index:3;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    width:22px;
+    height:22px;
+    border-radius:50%;
+    background:var(--orange-2);
+    color:#fff;
+    /* Left, opposite the remove button, so the two never sit under each other
+       — and unlike remove this is not revealed on hover: a tile you have to
+       hover to discover is broken is a tile you will not discover is broken. */
+  }
+  /* The badge stack buildThumbWrap produces is positioned against .thumb-wrap,
+     which is 44px in the rail — here it becomes the whole square cell. */
+  .sqfy-app .batch-tile .thumb-wrap{
+    position:relative;
+    width:100%;
+    height:auto;
+    aspect-ratio:1;
+    /* No ground and no frame (Xavier, 2026-08-31). The tile is already a
+       bordered card on its own surface; a second border a few pixels inside
+       the first, around a box that is mostly empty for any non-square image,
+       drew a rectangle nobody needed. The letterbox is the tile's surface
+       showing through. The checkerboard below is the one exception, and it
+       still earns its place — it says "this is transparent". */
+    /* Flex items get min-height:auto, which floors the box at its content's
+       min-content height — and the content is a full-resolution <img>. A
+       portrait source therefore stretched its "square" cell to 208×312 and
+       took the whole grid row with it. This is what makes the cell actually
+       square. */
+    min-height:0;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    border-radius:var(--radius-sm);
+    /* NOT overflow:hidden. The badges hang off the corners at -4px, exactly
+       as they do in the rail, and clipping them was why they were invisible
+       here in the first pass. Nothing needs clipping: `background` respects
+       border-radius on its own, and the image below rounds itself. */
+    overflow:visible;
+  }
+  /* The ring that separates a badge from what's behind it has to match what
+     IS behind it, and a tile's surface is not the rail row's. */
+  .sqfy-app .batch-tile .done-badge,
+  .sqfy-app .batch-tile .resize-badge,
+  .sqfy-app .batch-tile .sqfy-crop-badge,
+  .sqfy-app .batch-tile .sqfy-rename-badge{ border-color:var(--surface); }
+  .sqfy-app .batch-tile:hover .done-badge,
+  .sqfy-app .batch-tile:hover .resize-badge,
+  .sqfy-app .batch-tile:hover .sqfy-crop-badge,
+  .sqfy-app .batch-tile:hover .sqfy-rename-badge{ border-color:var(--surface-2); }
+  /* SQUARE CELL, WHOLE IMAGE (spec §2.2.1). contain, not cover: the cell is
+     square so the grid keeps a clean rhythm, and the image inside shows whole
+     at its own aspect — macOS Finder's icon view. A 16:9 shot reads as wide,
+     a portrait reads as tall, and the grid never goes ragged.
+     Deliberately different from the rail's thumb, and the reason is SIZE: at
+     44px a contained image is a stamp in a field of nothing and the thumb's
+     job is to be a scannable colour chip, so `cover` is right there. At 168px
+     the whole image is legible and IS the point — you are choosing which one
+     to click, and you cannot choose on a cropped centre.
+     One scoped rule, never a second thumbnail builder, so every badge a
+     future feature registers arrives here for free. */
+  .sqfy-app .batch-tile .thumb{
+    /* Sized to the IMAGE, not to the cell, and that is load-bearing for the
+       zoom (§3.6): the shared element a view transition tweens is a border
+       box, so a square box growing into a 16:9 stage would stretch the frames
+       on the way. Letting the box hug the picture — the wrap centres it and
+       supplies the letterbox ground — makes the transition a pure scale.
+       Visually identical to object-fit:contain, which stays as the fallback
+       for anything that sets an explicit size. */
+    width:auto;
+    height:auto;
+    max-width:100%;
+    max-height:100%;
+    object-fit:contain;
+    border-radius:var(--radius-sm);
+    display:block;
+    border:none;
+    background:transparent;
+  }
+  /* THE LETTERBOX GROUND. Flat and slightly recessed by default; the
+     transparency checkerboard ONLY where the source format can actually carry
+     alpha (.has-alpha, set in app.js). Filling every tile's margins with the
+     checkerboard was the prototype's answer and it reads badly — on a
+     1600×600 banner it is most of the cell and pulls the eye to the emptiness,
+     and it means nothing at all for a JPEG. This way it appears exactly when
+     it carries information. */
+  .sqfy-app .batch-tile .thumb-wrap.has-alpha{
+    background:
+      repeating-conic-gradient(#1c1d27 0% 25%, #17181f 0% 50%) 50% / 14px 14px;
+  }
+  /* THUMBNAIL REGENERATING — three beats: the image fades OUT, the spinner
+     holds alone for as long as the work plus the new image's decode takes,
+     then the replacement fades IN. What is on screen is either the old
+     thumbnail or the new one, never a cut between them.
+
+     ANIMATIONS, NOT TRANSITIONS, and that is not a style preference. The row
+     and tile are rebuilt from scratch on every render, so a transition has no
+     element that survives long enough to have a "from" — a render landing
+     mid-fade restarted it or skipped it outright, which is the pop. An
+     animation can be RESUMED: buildThumbWrap gives it a negative delay equal
+     to however long the phase has already been running, so a fresh element
+     renders the frame the discarded one was showing. Applies in the rail too,
+     where it is small but consistent. */
+  @keyframes sqfy-thumb-out{ from{ opacity:1; } to{ opacity:0; } }
+  @keyframes sqfy-thumb-in{ from{ opacity:0; } to{ opacity:1; } }
+  /* THE SPINNER IS AN IMAGE, NOT AN ANIMATION, and that is the whole fix.
+     Two earlier attempts failed for the same underlying reason: renderQueue
+     destroys and rebuilds every row and tile, and a CSS animation belongs to
+     the element running it. Declared on the spinner, the rotation restarted
+     on every rebuild — a dozen times a second while a tone slider moves, so
+     it never got past its first few degrees. Moved to a clock on .sqfy-app
+     (which is never rebuilt) it stopped restarting but started costing: an
+     animated custom property with inherits:true invalidates the computed
+     style of every element in the subtree on every frame, so the more tiles
+     were on screen the worse the whole app moved. Xavier called that one.
+
+     An animated SVG has neither problem. The animation lives in the image
+     resource, which the browser keys by URL and shares between every element
+     using it, so a rebuilt element joins the rotation already in progress
+     instead of starting its own — and nothing in the document is animating,
+     so nothing is being recalculated. One asset, decoded once, however many
+     spinners are on screen.
+
+     Inline as a data URI rather than a file in public/: the URL has to be
+     identical everywhere for the browser to share the timeline, and the two
+     WordPress builds do not resolve app-root paths the way the web build
+     does. Colours are baked because an SVG loaded as an image cannot see the
+     page's custom properties — they are --border-hover and --orange. */
+  .sqfy-app .thumb-wrap.is-loading::after{
+    content:'';
+    position:absolute;
+    top:50%; left:50%;
+    width:22px; height:22px;
+    margin:-11px 0 0 -11px;
+    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='18' fill='none' stroke='%233a3b4c' stroke-width='4'/><path d='M22 4a18 18 0 0 1 18 18' fill='none' stroke='%23ff7a45' stroke-width='4' stroke-linecap='round'><animateTransform attributeName='transform' type='rotate' values='0 22 22;360 22 22' dur='.8s' repeatCount='indefinite'/></path></svg>") center / contain no-repeat;
+    pointer-events:none;
+  }
+  .sqfy-app .qitem .thumb-wrap.is-loading::after{
+    width:16px; height:16px;
+    margin:-8px 0 0 -8px;
+  }
+  @media (prefers-reduced-motion: reduce){
+    .sqfy-app .thumb-wrap .thumb{ animation:none !important; }
+    .sqfy-app .thumb-wrap.is-loading .thumb{ opacity:.22; }
+    /* The same ring with its arc in the track's colour and no SMIL — a
+       still asset rather than a stopped animation. */
+    .sqfy-app .thumb-wrap.is-loading::after{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='18' fill='none' stroke='%233a3b4c' stroke-width='4'/><path d='M22 4a18 18 0 0 1 18 18' fill='none' stroke='%233a3b4c' stroke-width='4' stroke-linecap='round'/></svg>"); }
+  }
+
+  .sqfy-app .batch-tile-name{
+    font-size:0.76rem;
+    color:var(--text-dim);
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+  }
+  /* The add-more tile. The rail took the dropzone with it when it slid out,
+     and "drop anywhere works" is not discoverable on its own — this is also
+     the only keyboard-reachable intake left in this mode. */
+  .sqfy-app .batch-tile-add{
+    align-items:center;
+    justify-content:center;
+    gap:6px;
+    border-style:dashed;
+    background:transparent;
+    color:var(--text-faint);
+    min-height:0;
+  }
+  .sqfy-app .batch-tile-add:hover{ color:var(--orange); border-color:var(--orange); background:transparent; }
+
+  /* REMOVE, on the tile. Hidden until the tile is hovered or something inside
+     it has focus: it is destructive, and the tile's own job is to be clicked.
+     :focus-within rather than :hover alone is what keeps it reachable by
+     keyboard — tab to the tile, tab once more, and it is there.
+     Above the badges (z-index) because both live in the corners and the
+     remove has to be the one you can hit. */
+  .sqfy-app .batch-tile-remove{
+    position:absolute;
+    top:6px;
+    right:6px;
+    z-index:3;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    width:22px;
+    height:22px;
+    padding:0;
+    border-radius:50%;
+    border:1px solid var(--border);
+    background:var(--surface);
+    color:var(--text-dim);
+    cursor:pointer;
+    opacity:0;
+    transition:opacity .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
+  }
+  .sqfy-app .batch-tile:hover .batch-tile-remove,
+  .sqfy-app .batch-tile:focus-within .batch-tile-remove{ opacity:1; }
+  /* The same hover the rail's remove has carried since #17 — one remove
+     control in the app, one colour for it. */
+  .sqfy-app .batch-tile-remove:hover{ color:#fff; background:var(--orange-2); border-color:var(--orange-2); }
+  .sqfy-app .batch-tile-remove:focus-visible{ opacity:1; outline:2px solid var(--focus); outline-offset:2px; }
+
+  /* LEAVING. Removing an image used to be a pop — the row or tile was simply
+     not in the next render, which reads as a glitch rather than as something
+     you did. The exit is shaped to the surface it happens in: a rail row
+     slides out along the list it lives in, a grid tile shrinks in place,
+     because that is the direction each of them would move.
+     Purely visual — the space closes up when the render lands at the end.
+     Animating the reflow too would mean a FLIP pass over every sibling, which
+     is a different and much larger piece of work.
+     pointer-events off the moment it starts: the row is on its way out and
+     must not answer a second click. */
+  @keyframes sqfy-row-exit{
+    to{ opacity:0; transform:translateX(-14px); }
+  }
+  @keyframes sqfy-tile-exit{
+    to{ opacity:0; transform:scale(0.9); }
+  }
+  .sqfy-app .qitem.is-removing{
+    animation:sqfy-row-exit 190ms ease forwards;
+    pointer-events:none;
+  }
+  .sqfy-app .batch-tile.is-removing{
+    animation:sqfy-tile-exit 190ms ease forwards;
+    pointer-events:none;
+  }
+  /* An exit that cannot be seen is just a delay before the same pop, so with
+     motion off app.js removes the item outright and these never apply. */
+
+  /* THE EDIT PILL. Centred on the THUMBNAIL rather than the tile, so it sits
+     on the picture instead of drifting toward the filename caption below it —
+     and clear of both corner controls: the remove sits top right, the badge
+     stack runs down the left edge.
+     Same glass as the stage badges and the codec status line, which is what
+     lets it be legible over any thumbnail without a dim underneath it.
+     pointer-events:none because it is a label, not a button — the tile is the
+     click target and always has been. */
+  .sqfy-app .batch-tile-open{
+    position:absolute;
+    top:50%; left:50%;
+    z-index:2;
+    display:flex;
+    align-items:center;
+    gap:6px;
+    padding:6px 12px;
+    border-radius:var(--radius-pill);
+    background:rgba(13,14,19,0.74);
+    backdrop-filter:blur(6px);
+    -webkit-backdrop-filter:blur(6px);
+    border:1px solid var(--border-hover);
+    color:#fff;
+    font-size:0.78rem;
+    font-weight:600;
+    white-space:nowrap;
+    pointer-events:none;
+    opacity:0;
+    transform:translate(-50%, -50%) scale(0.94);
+    transition:opacity .12s ease, transform .12s ease;
+  }
+  /* :focus-visible on the tile is the keyboard half of the same affordance —
+     tabbing through the grid should say the same thing hovering does. */
+  .sqfy-app .batch-tile:hover .batch-tile-open,
+  .sqfy-app .batch-tile:focus-visible .batch-tile-open{
+    opacity:1;
+    transform:translate(-50%, -50%) scale(1);
+  }
+  /* Suppressed while a reorder drag is in flight (the grid carries the class,
+     not the dragged tile — it is the OTHER tiles that would light up as the
+     cursor crosses them and offer to open what you are busy moving), and on
+     the tile being opened, so it is not caught in the zoom's first frame. */
+  .sqfy-app .batch-grid.sqfy-reordering .batch-tile-open,
+  .sqfy-app .batch-tile.is-opening .batch-tile-open{ opacity:0; }
+  @media (prefers-reduced-motion: reduce){
+    .sqfy-app .batch-tile-open{ transition:none; transform:translate(-50%, -50%); }
+    .sqfy-app .batch-tile:hover .batch-tile-open,
+    .sqfy-app .batch-tile:focus-visible .batch-tile-open{ transform:translate(-50%, -50%); }
+  }
+
+  /* REORDER (Pro), the grid half of it — src/pro/reorder.js. A tile is a
+     picture, so dragging it needs no grip to advertise itself; what it does
+     need is somewhere to land, and in a wrapped grid that is a vertical rule
+     down the edge the item would be inserted at. Drawn on the tile the cursor
+     is nearest rather than by moving the tiles themselves: reflowing a grid
+     under a drag makes the drop target chase the cursor. */
+  .sqfy-app .batch-tile.sqfy-reorder-tile{ cursor:grab; }
+  .sqfy-app .batch-tile.sqfy-dragging{ opacity:.4; cursor:grabbing; }
+  .sqfy-app .batch-tile.sqfy-drag-before::before,
+  .sqfy-app .batch-tile.sqfy-drag-after::before{
+    content:'';
+    position:absolute;
+    top:4px;
+    bottom:4px;
+    width:3px;
+    border-radius:2px;
+    background:var(--purple);
+    pointer-events:none;
+  }
+  .sqfy-app .batch-tile.sqfy-drag-before::before{ left:-8px; }
+  .sqfy-app .batch-tile.sqfy-drag-after::before{ right:-8px; }
+  .sqfy-app .batch-tile-add-icon{ display:flex; }
+
+  /* ---------- batch settings ---------- */
+  /* Same surface, radius and padding as the editor's .controls bar, in the
+     same place on screen, because it is the same thing one level up: the
+     recipe for what you are looking at. */
+  .sqfy-app .batch-settings{
+    background:var(--surface);
+    border:1px solid var(--border);
+    border-radius:var(--radius-lg);
+    padding:18px 26px 22px;
+    display:flex;
+    flex-direction:column;
+    gap:16px;
+    flex:none;
+  }
+  .sqfy-app .batch-settings-head{
+    display:flex;
+    align-items:center;
+    gap:12px;
+    flex-wrap:wrap;
+  }
+  .sqfy-app .batch-settings-title{
+    margin:0;
+    font-size:0.72rem;
+    font-weight:700;
+    letter-spacing:.09em;
+    text-transform:uppercase;
+    color:var(--text-faint);
+  }
+  .sqfy-app .batch-settings-head .btn.accent{ flex:none; }
+  /* The set and the way out of it, next to the title that names them. Both
+     were a band of their own above the grid until #51's last pass — a whole
+     row of tiles spent on one number and one button. */
+  .sqfy-app .batch-settings-head .savings{ color:var(--success); font-weight:700; font-size:0.85rem; }
+  .sqfy-app .batch-settings-head .clear-queue-btn{ flex:none; }
+  /* A rule between the batch's description and the controls that act on it.
+     Hidden when the head wraps, where a divider mid-column reads as a mistake. */
+  .sqfy-app .batch-tools::before{
+    content:'';
+    align-self:stretch;
+    width:1px;
+    margin:2px 6px 2px 0;
+    background:var(--border);
+  }
+  .sqfy-app .batch-tools:empty{ display:none; }
+  .sqfy-app .batch-summary{
+    display:flex;
+    align-items:center;
+    gap:12px;
+    min-width:0;
+  }
+
+  /* MOBILE: FOUR ROWS, AND THE ACTION LAST. Everything above assumes one wide
+     line; at this width it was wrapping into an arbitrary shape — the count
+     pill orphaned beside the title, Clear next to Presets as if they were the
+     same kind of thing, and Process all stranded in the middle of the bar
+     with the settings it runs continuing underneath it.
+     display:contents dissolves the head so its children become rows of the
+     settings column itself. That is what lets `order` put the button AFTER
+     the cards: order only sorts siblings, and until the head is dissolved the
+     button and the cards are not siblings. The alternative was a second copy
+     of the button in the markup, which is a second thing to keep in step. */
+  @media (max-width: 700px){
+    .sqfy-app .batch-settings-head{ display:contents; }
+    .sqfy-app .batch-settings-title{ order:1; }
+    .sqfy-app .batch-summary{ order:2; }
+    .sqfy-app .batch-tools{ order:3; margin-left:0; }
+    /* The rule separated the description from the controls when they shared a
+       line. On their own rows the gap says it. */
+    .sqfy-app .batch-tools::before{ display:none; }
+    .sqfy-app .batch-settings-head .spacer{ display:none; }
+    .sqfy-app .batch-cards{ order:4; }
+    /* Last, and full width: it is the one thing on this bar you press when
+       everything above it is settled, so it reads as the end of the form
+       rather than as another control in it. */
+    .sqfy-app .batch-settings-head .btn.accent{
+      order:5;
+      width:100%;
+      justify-content:center;
+    }
+  }
+
+  /* ---------- the cards ---------- */
+  /* One row, wrapping. Each feature card takes an equal share of what is
+     left after the Pro card, which sizes to its two buttons — the four core
+     features are the ones with fields to lay out, so they are the ones that
+     get the width. minmax via flex-basis rather than a grid template because
+     the card count is not fixed: a host that registers no Pro tabs has five
+     cards, a free web boot has six, and neither should need its own rule. */
+  .sqfy-app .batch-cards{
+    display:flex;
+    flex-wrap:wrap;
+    align-items:stretch;
+    gap:12px;
+  }
+  .sqfy-app .batch-card{
+    flex:1 1 210px;
+    min-width:0;
+    display:flex;
+    flex-direction:column;
+    gap:10px;
+    padding:12px 14px 14px;
+    background:var(--surface-2);
+    border:1px solid var(--border);
+    border-radius:var(--radius);
+  }
+  .sqfy-app .batch-card-head{
+    display:flex;
+    align-items:center;
+    gap:8px;
+    min-height:20px;
+  }
+  /* A CARD TITLE IS A HEADING, NOT A FIELD LABEL. These were uppercase 0.74rem
+     --text-dim, which is within a hair of .control label above (uppercase
+     0.78rem --text-dim) — so "SIZE" and "MAX WIDTH" read as two items in one
+     list rather than as a section and the field inside it. They now match
+     .modal-header h3 exactly, which is the per-image editor's own answer to
+     "what does the title of this group of controls look like": same size,
+     same weight, same inherited text colour, no uppercasing. The field labels
+     are unchanged and are now clearly subordinate. */
+  .sqfy-app .batch-card-title{
+    display:flex;
+    align-items:center;
+    gap:8px;
+    margin:0;
+    font-size:1.05rem;
+    font-weight:700;
+  }
+  /* Dimmer than the word, like the toolbar pills': the name is what you read,
+     the glyph is what you find it by. */
+  .sqfy-app .batch-card-icon{
+    display:flex;
+    flex:none;
+    color:var(--text-dim);
+  }
+  /* The same PRO label the toolbar's cluster carries, for the same reason:
+     one label over a group reads as a tier, two badges read as two offers. */
+  .sqfy-app .batch-pro-label{
+    font-size:0.6rem;
+    font-weight:800;
+    letter-spacing:.1em;
+    padding:2px 6px;
+    border-radius:var(--radius-pill);
+    background:var(--gradient-brand);
+    color:#fff;
+  }
+  .sqfy-app .batch-card-body{
+    display:flex;
+    flex-direction:column;
+    align-items:stretch;
+    gap:12px;
+    min-width:0;
+  }
+  /* The field builders are shared with Quick Process, which stacks them in a
+     narrow column — so inside a card they only need their desktop minimums
+     dropped. */
+  .sqfy-app .batch-card-body .control{ min-width:0; }
+  .sqfy-app .batch-card-body .quality-control{ min-width:0; }
+  .sqfy-app .batch-card-body .batch-rename-row{ flex-wrap:wrap; }
+
+  /* QUALITY AND EFFORT SHARE A ROW. Format is the only card with three
+     fields, so it was setting the height of the whole bar — and the bar is
+     anchored to the bottom of the app, so its height comes straight out of
+     the grid above it. The two sliders are a natural pair (both are "how hard
+     do we work on this"), and neither needs the full card width to be read.
+     The select keeps its own line: it is the field the other two depend on.
+
+     flex-grow on the pair rather than a fixed half, because they are not
+     always both there — PNG has no quality and JPEG has no effort (the
+     builders hide the one that cannot apply). Whichever survives takes the
+     whole line rather than sitting in half of one. */
+  .sqfy-app .batch-card[data-id="format"] .batch-card-body{
+    flex-direction:row;
+    flex-wrap:wrap;
+    gap:10px 14px;
+  }
+  .sqfy-app .batch-card[data-id="format"] .batch-card-body > .control{ flex:1 1 100%; }
+  .sqfy-app .batch-card[data-id="format"] .batch-card-body > .quality-control{
+    flex:1 1 calc(50% - 7px);
+    min-width:118px;
+  }
+  /* And a little more of the row to spend it in, since it is carrying two
+     fields on that line where its neighbours carry one. */
+  .sqfy-app .batch-card[data-id="format"]{ flex-grow:1.5; }
+  /* A range input has an INTRINSIC minimum width — around 129px in Chrome —
+     and flex:1 alone will not take it below that. In a half-width column the
+     slider therefore refused to shrink, overflowed its row, and ran straight
+     under the readout beside it (two sliders and a "50" stacked on top of
+     each other). flex-basis:0 with min-width:0 is what makes it actually
+     share the line; the readout stops flexing at all so it cannot be the
+     thing that gives way. */
+  .sqfy-app .batch-card-body .quality-slider{ flex:1 1 0; min-width:0; }
+  .sqfy-app .batch-card-body .quality-row{ gap:8px; min-width:0; }
+  .sqfy-app .batch-card-body .quality-value{ flex:none; min-width:26px; font-size:0.85rem; }
+  /* Below this the pair has less width to share than one slider is usefully
+     drawn in, so they go back to a line each. The card is full-width here
+     anyway (the cards row has wrapped to one per line), so the height this
+     costs is height the bar has to spare. */
+  @media (max-width: 700px){
+    .sqfy-app .batch-card[data-id="format"] .batch-card-body > .quality-control{
+      flex:1 1 100%;
+    }
+  }
+
+  /* ---------- the Pro tools and their popovers ---------- */
+  /* In the settings head, between the title and Process all — the room was
+     already there, and a button belongs next to the bar's other button. */
+  .sqfy-app .batch-tools{
+    display:flex;
+    align-items:center;
+    gap:8px;
+    margin-left:6px;
+  }
+  .sqfy-app .batch-pro-slots{ display:flex; gap:8px; }
+  .sqfy-app .batch-pro-slot{ position:relative; }
+  .sqfy-app .batch-pro-btn{
+    appearance:none;
+    display:inline-flex;
+    align-items:center;
+    gap:7px;
+    border:1px solid var(--border);
+    background:var(--surface-3);
+    color:var(--text);
+    font:inherit;
+    font-size:0.85rem;
+    font-weight:600;
+    padding:9px 16px;
+    border-radius:var(--radius-pill);
+    cursor:pointer;
+    white-space:nowrap;
+    transition:border-color .12s ease, background .12s ease, color .12s ease;
+  }
+  /* Dimmer than the label beside it, the same way the toolbar pills' icons
+     are: the word is what you read, the glyph is what you find it by. */
+  .sqfy-app .batch-pro-btn-icon{
+    display:flex;
+    flex:none;
+    color:var(--text-dim);
+  }
+  .sqfy-app .batch-pro-btn:hover{ border-color:var(--border-hover); }
+  .sqfy-app .batch-pro-btn:hover .batch-pro-btn-icon,
+  .sqfy-app .batch-pro-btn.is-open .batch-pro-btn-icon{ color:var(--text); }
+  .sqfy-app .batch-pro-btn.is-open{ border-color:var(--purple); color:#fff; }
+  .sqfy-app .batch-pro-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+  .sqfy-app .batch-pro-btn.is-locked{ color:var(--text-dim); }
+
+  /* FLOWS UP, because the settings bar is anchored to the bottom of the app
+     and there is nothing below it to open into. Right-aligned to its button
+     rather than left, so a card sitting at the left edge of a narrow window
+     still opens into the bar's width instead of off the side. */
+  .sqfy-app .batch-pop{
+    position:absolute;
+    bottom:calc(100% + 10px);
+    left:0;
+    z-index:40;
+    min-width:280px;
+    max-width:min(560px, 80vw);
+    display:flex;
+    flex-direction:column;
+    gap:12px;
+    padding:14px 16px 16px;
+    background:var(--surface);
+    border:1px solid var(--border-hover);
+    border-radius:var(--radius);
+    box-shadow:0 18px 44px rgba(0,0,0,.5);
+  }
+  .sqfy-app .batch-pop[hidden]{ display:none; }
+  .sqfy-app .batch-pop-head{
+    display:flex;
+    align-items:center;
+    gap:10px;
+  }
+  /* Sits at the far end of the head — after the reset, which claims the
+     first of the trailing space with its own margin-left:auto. */
+  .sqfy-app .batch-pop-close{
+    appearance:none;
+    margin-left:auto;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    width:24px;
+    height:24px;
+    padding:0;
+    flex:none;
+    border:1px solid transparent;
+    border-radius:50%;
+    background:transparent;
+    color:var(--text-faint);
+    cursor:pointer;
+    transition:color .12s ease, background .12s ease, border-color .12s ease;
+  }
+  /* The reset already pushed itself right, so the close only needs the gap. */
+  .sqfy-app .batch-reset + .batch-pop-close{ margin-left:0; }
+  .sqfy-app .batch-pop-close:hover{ color:var(--text); background:var(--surface-2); border-color:var(--border); }
+  .sqfy-app .batch-pop-close:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+  .sqfy-app .batch-pop-title{
+    font-size:0.74rem;
+    font-weight:700;
+    letter-spacing:.07em;
+    text-transform:uppercase;
+    color:var(--text-dim);
+  }
+  /* The presets list brings its own scroller and padding — it is the
+     editor's dropdown list, mounted here (src/pro/presets.js). */
+  .sqfy-app .batch-pop-body:has(.sqfy-presets-batch-list){ gap:0; }
+
+  /* Reset names what it clears ("Reset Crop") and sits at the end of its own
+     card's head, so its subject is the line above it. Quiet by design: it is
+     an escape hatch, not one of the settings. */
+  .sqfy-app .batch-reset{
+    appearance:none;
+    margin-left:auto;
+    border:1px solid var(--border);
+    background:transparent;
+    color:var(--text-faint);
+    font:inherit;
+    font-size:0.72rem;
+    font-weight:600;
+    padding:4px 10px;
+    border-radius:var(--radius-pill);
+    cursor:pointer;
+    flex:none;
+    white-space:nowrap;
+    transition:color .12s ease, border-color .12s ease;
+  }
+  .sqfy-app .batch-reset:hover{ color:var(--text); border-color:var(--border-hover); }
+  .sqfy-app .batch-reset:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+
+  /* Batch crop: a ratio picker, not crop mode (spec §3.4.1). A drag-frame
+     across twelve images of different dimensions can only ever share the
+     RATIO, so the ratio is what the control offers — and anyone who wants to
+     nudge one image clicks its tile and gets the real crop tool. */
+  .sqfy-app .batch-ratios{ display:flex; gap:8px; flex-wrap:wrap; }
+  .sqfy-app .batch-ratio{
+    appearance:none;
+    border:1px solid var(--border);
+    background:var(--surface-2);
+    color:var(--text-dim);
+    font:inherit;
+    font-size:0.85rem;
+    font-weight:600;
+    padding:8px 16px;
+    border-radius:var(--radius-pill);
+    cursor:pointer;
+    transition:background .12s ease, color .12s ease, border-color .12s ease;
+  }
+  .sqfy-app .batch-ratio:hover{ color:var(--text); border-color:var(--border-hover); }
+  .sqfy-app .batch-ratio.is-active{
+    background:var(--select-tint);
+    border-color:var(--select-ink);
+    color:var(--select-ink);
+  }
+  .sqfy-app .batch-ratio:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
+
+  @media (max-width: 900px){
+    .sqfy-app .batch-mode{ padding:16px; }
+    .sqfy-app .batch-grid{ grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); }
+    .sqfy-app .batch-settings{ padding:14px 16px 18px; }
+    .sqfy-app .batch-settings-head .btn{ width:100%; justify-content:center; }
+  }
+
+  /* ---------- mode-switch transition (roadmap #51, spec §3.6) ---------- */
+  /* The rail's own grid-template-columns transition is suspended while a view
+     transition runs. Both would otherwise animate the same change: the
+     browser captures the end state IMMEDIATELY after the DOM mutation, before
+     the CSS transition has moved at all, so the new snapshot would show the
+     rail still collapsed and the live layout would then slide again
+     underneath it. One motion means one animator. */
+  .sqfy-app.sqfy-mode-vt .layout{ transition:none; }
 /* Full-viewport overlay that hosts the Squishify app above wp-admin.
    Everything inside the app body is styled by core/squishify.css (.sqfy-app);
@@ -2152 +3517 @@
 }
 
+/* THREE TRACKS, matching core's own header (squishify.css). space-between
+   with two children put the logo and the Return button at the edges, which
+   was right until there was a third thing between them: a centred control
+   sitting in the leftover space drifts as either edge changes width, and the
+   Return button is the one element in this strip that must never move. Equal
+   outer tracks pin the middle to the real middle and decouple the two edges. */
 .sqfy-overlay-header{
   flex:none;
-  display:flex;
+  display:grid;
+  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
   align-items:center;
-  justify-content:space-between;
   gap:12px;
   height:48px;
@@ -2163 +3534 @@
   border-bottom:1px solid #2b2c3a;
 }
+/* A STYLE SCOPE, NOT A BOX. .sqfy-app carries core's design tokens and is the
+   prefix on every core rule, so the centre slot needs the class for anything
+   mounted into it to be styled at all — but the class also declares a flex
+   column with the app's background, which is not what a 48px header cell is.
+   Overridden here rather than by weakening core's own rule, since core is
+   right about what a .sqfy-app root looks like. */
+.sqfy-overlay-header .sqfy-overlay-center{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  min-width:0;
+  background:none;
+}
+.sqfy-overlay-header .sqfy-return-btn{ justify-self:end; }
 .sqfy-overlay-title{
   display:inline-flex;
@@ -2380 +3765 @@
   color:var(--text);
   font-size:0.82rem;
+  white-space:nowrap;
 }
 .sqfy-app .sqfy-upsell-feature-card:hover{
   border-color:var(--purple);
   background:var(--surface-3);
+}
+/* The card's second line: what the feature is, in three or four words.
+   Dimmer and smaller than the name so the name is what the eye lands on
+   while scanning — the card is a menu entry, not an explanation. */
+.sqfy-app .sqfy-upsell-feature-sub{
+  color:var(--text-dim);
+  font-size:0.74rem;
+  line-height:1.25;
 }
 .sqfy-app .sqfy-upsell-feature-see{
@@ -2941 +4335 @@
   font-weight:700;
 }
-.sqfy-app .sqfy-whatsnew-group{
-  text-align:left;
-}
-.sqfy-app .sqfy-whatsnew-group + .sqfy-whatsnew-group{
-  margin-top:14px;
-  padding-top:14px;
-  border-top:1px solid var(--border);
-}
+/* The version the highlights belong to. Small and dim on purpose — "What's
+   new" is the message; the number is a footnote that makes the changelog
+   link below make sense. Only ever ONE version here (see whats-new.js). */
 .sqfy-app .sqfy-whatsnew-version{
   font-size:0.78rem;
@@ -2954 +4343 @@
   letter-spacing:0.02em;
   color:var(--text-dim);
-  margin-bottom:6px;
+  margin-bottom:12px;
 }
 .sqfy-app .sqfy-whatsnew-items{
@@ -2962 +4351 @@
   display:flex;
   flex-direction:column;
-  gap:9px;
+  gap:14px;
+  text-align:left;
   font-size:0.85rem;
   line-height:1.45;
   color:var(--text-dim);
 }
+/* The row is check + body, and the BODY is the column that a clip drops
+   into under its own sentence. The check stays aligned to the first line of
+   text either way, which is why it can't be a plain baseline row any more. */
 .sqfy-app .sqfy-whatsnew-items li{
   display:flex;
   gap:10px;
-  align-items:baseline;
+  align-items:flex-start;
+}
+.sqfy-app .sqfy-whatsnew-body{
+  display:flex;
+  flex-direction:column;
+  gap:10px;
+  min-width:0;
 }
 .sqfy-app .sqfy-whatsnew-check{
   flex:none;
   color:var(--success);
-  transform:translateY(2px);
+  transform:translateY(3px);
 }
 .sqfy-app .sqfy-whatsnew-tag{
@@ -2988 +4387 @@
   vertical-align:middle;
 }
+
+/* The clip box. Same 16:9 / object-fit:cover contract as the Pro upsell
+   modal's media (src/upsell/upsell.css) — the clips are shared between the
+   two surfaces, so they have to be croppable identically or one of them
+   letterboxes. */
+.sqfy-app .sqfy-whatsnew-media{
+  position:relative;
+  aspect-ratio:16/9;
+  border-radius:var(--radius);
+  border:1px solid var(--border);
+  background:var(--surface-3);
+  overflow:hidden;
+}
+.sqfy-app .sqfy-whatsnew-media-placeholder{
+  position:absolute;
+  inset:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--text-dim);
+  opacity:.5;
+}
+/* Layered over the placeholder rather than replacing it, so there's no black
+   frame between the element being created and the first frame decoding.
+   Shared by <video> and <img>: the rule is pure box-filling. */
+.sqfy-app .sqfy-whatsnew-media-asset{
+  position:absolute;
+  inset:0;
+  display:block;
+  width:100%;
+  height:100%;
+  object-fit:cover;
+}
+
+/* Footer link to the full history. A quiet text link, not a second button:
+   "Got it" is the action, this is the way out for the one person in ten who
+   wants the detail. */
+.sqfy-app .sqfy-whatsnew-changelog{
+  display:block;
+  width:100%;
+  margin-top:16px;
+  padding:4px;
+  background:none;
+  border:0;
+  font:inherit;
+  font-size:0.8rem;
+  color:var(--text-dim);
+  text-decoration:underline;
+  text-underline-offset:2px;
+  cursor:pointer;
+}
+.sqfy-app .sqfy-whatsnew-changelog:hover{ color:var(--text); }
+
+/* Shared by this modal's "Got it" and the changelog's "Close" — one button
+   in one role, so one rule, as it was before the highlights rework.
+   `align-self` is the load-bearing line: core's .modal is a stretch-aligned
+   flex column, so a button here spans the full dialog width unless it opts
+   out. Sized to its label instead, so the eye lands on the clip and the
+   list rather than on a purple bar the width of the modal. */
 .sqfy-app .sqfy-whatsnew-close{
+  align-self:center;
   justify-content:center;
   font-weight:700;
-  padding:10px 16px;
-  margin-top:14px;
-  width:100%;
+  padding:9px 30px;
+  margin-top:2px;
 }
 
@@ -3000 +4458 @@
    openChangelogModal in whats-new.js for why it is a separate modal rather
    than a mode of the what's-new one. */
+
+/* Version groups belong to the changelog alone now — the what's-new modal
+   shows exactly one version and renders its own flat list. The group,
+   separator, and tighter list rules stayed with the consumer that still
+   uses them (groupsHTML in whats-new.js) rather than in the shared block
+   above, which is now what's-new's own layout. */
+.sqfy-app .sqfy-whatsnew-group{
+  text-align:left;
+}
+.sqfy-app .sqfy-whatsnew-group + .sqfy-whatsnew-group{
+  margin-top:14px;
+  padding-top:14px;
+  border-top:1px solid var(--border);
+}
+.sqfy-app .sqfy-whatsnew-group .sqfy-whatsnew-version{
+  margin-bottom:6px;
+}
+.sqfy-app .sqfy-changelog-modal .sqfy-whatsnew-items{
+  gap:9px;
+}
 
 /* Above the site menu (z-index 130), not just above the app's own modals

squishify/trunk/assets/squishify-wp.js

@@ -158 +158 @@
   return `
       <div class="dropzone" id="${id}" tabindex="0" role="button" aria-label="${single ? "Add an image" : "Add images"}">
+        <!-- AN IMAGE WITH A PLUS, NOT A CLOUD WITH AN ARROW (2026-09-04).
+             This was the standard cloud-upload glyph — the single most
+             recognizable "this goes to a server" symbol there is — sitting
+             directly under a product whose tagline is "Nothing gets uploaded"
+             and a footer that promises images never leave the device. The
+             icon was arguing against the copy, and the icon wins: it is read
+             first and it is read without being read.
+             Prompted by a reddit reply reading the dropzone as an upload
+             widget, which Xavier had to answer in prose; the icon is what
+             invited the question.
+             An OPEN FOLDER, chosen over an image glyph (Xavier): a folder is
+             unambiguously a place on your own machine, which is the exact
+             claim being doubted, where an image glyph only names what goes in
+             and stays silent about where it lives. Open rather than closed
+             because this is a receptacle, not a browse button.
+             Deliberately not a downward arrow, which would only reverse the
+             direction of the same transport idea, and would then collide with
+             DOWNLOAD_ICON, the app's real arrow, used for the per-item and
+             batch download actions. -->
         <span class="dz-icon" aria-hidden="true">
-          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18a4.5 4.5 0 0 1-.5-8.98A5.5 5.5 0 0 1 17.4 8.02 4 4 0 0 1 17 16"/><path d="M12 12v7"/><path d="M9.5 14.5 12 12l2.5 2.5"/></svg>
+          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>
         </span>
         <span class="dz-title">Drop ${single ? "an image" : "images"} here</span>
@@ -169 +188 @@
       </div>`;
 }
+function privacyNoteHTML(s) {
+  return `
+      <div class="privacy-note">
+        <span class="privacy-icon" aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
+        </span>
+        <span class="privacy-text">${s.privacyNote}</span>
+      </div>`;
+}
 function renderAppHTML(config) {
   const s = config.strings;
   const single = 1 === config.maxQueue;
   return `
+  ${// THE HEADER EXISTS IF AND ONLY IF THE HOST SUPPLIED BRANDING FOR IT
+  // (#52, docs/features/active/app-shell-spec.md §2.2). That is the whole
+  // gate — no new boolean — and it is what makes a double header
+  // impossible: the WordPress overlay has had its own 48px header since it
+  // shipped, so its config stops passing brandHTML and core renders none.
+  //
+  // The brand used to live INSIDE the queue rail, which meant the app's
+  // identity was a child of the queue and vanished with it. Bulk mode made
+  // that visible by taking the rail away mid-session; the fix is not to
+  // keep the rail, it is to stop storing identity in it.
+  config.brandHTML ? `<header class="app-header">
+      ${config.brandHTML}
+      <!-- The centre track. Always rendered, even while empty, because it is
+           a GRID CELL and not a spacer: if it collapsed when the view switch
+           is hidden, the chrome slot would slide into the middle column and
+           the header's right edge would move every time a queue starts or
+           ends. Its counterpart on WordPress is config.headerSlot, which that
+           host builds into its own overlay header for the same reason. -->
+      <div class="app-header-center" id="appHeaderCenter"></div>
+      <!-- The chrome slot. Upgrade badge / trial countdown / site menu mount
+           here through api.mountChrome (app.js), which picks this when a
+           header exists and #emptyStateCorner when one does not — the
+           WordPress free plugin mounts the same upsell badge and has no
+           header to put it in. Core owns the choice so no feature module has
+           to know which host it is running on. -->
+      <div class="app-header-slot" id="appHeaderSlot"></div>
+    </header>` : ""}
+  <!-- THE VIEW SWITCH (roadmap #51). Grid and Preview are two ways of looking
+       at ONE queue, not a batch tool and a single-image tool — every feature
+       applies to all in both, and Process all finishes the job from either.
+       The grid used to be the only one of the two that announced itself: you
+       reached the stage by clicking a particular tile, so it read as "drill
+       into this file" rather than as a place you could work. A permanent
+       two-segment control says both exist, at all times, which is what makes
+       choosing between them possible at all.
+
+       RENDERED HERE AND RELOCATED AT BOOT (app.js). It has to live in the
+       header, and the header is not core's on every host — WordPress's
+       overlay owns that strip and core renders none. So the markup lives in
+       one place and app.js moves the node into #appHeaderCenter or, failing
+       that, config.headerSlot. Starts hidden, so it never flashes in the
+       document position it is about to leave.
+
+       NOT in the editor's action group, which is where the old [Grid] button
+       was. That group is ordered by rising commitment — navigate, commit and
+       advance, commit all and finalize — and a mode switch that lived inside
+       it read as "back" rather than as one of two peers. It also only existed
+       in one of the two modes, which is the one thing a mode control may
+       never do. -->
+  <div class="view-switch" id="viewSwitch" role="group" aria-label="View" hidden>
+    <button class="view-switch-btn" id="viewSwitchGrid" type="button" aria-pressed="false" title="See every image at once">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
+      <span>Grid</span>
+    </button>
+    <button class="view-switch-btn" id="viewSwitchPreview" type="button" aria-pressed="true" title="Work one image at a time, with the before/after compare">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9.5" r="1.6"/><path d="m4 17 4.5-4.5 3 3 3.5-3.5L20 16"/></svg>
+      <span>Preview</span>
+    </button>
+  </div>
   <div class="layout">
     <aside class="queue-panel">
-      ${config.brandHTML}
       ${dropzoneHTML("dropzone", s, single)}
       <input type="file" id="fileInput" accept="image/*"${single ? "" : " multiple"}>
@@ -199 +285 @@
         <div class="queue-empty" id="queueEmptyMsg">${single ? "No image yet.<br/>Add one to get started." : "Queue is empty.<br/>Add images to get started."}</div>
       </div>
-      <div class="privacy-note">
-        <span class="privacy-icon" aria-hidden="true">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
-        </span>
-        <span class="privacy-text">${s.privacyNote}</span>
-      </div>
     </aside>
 
@@ -220 +300 @@
 
         <div class="empty-hero">
-          <h2 class="empty-title">Let&rsquo;s get started!</h2>
-          <p class="empty-sub">Prep your ${single ? "image" : "images"} in 3 simple steps.</p>
+          <h2 class="empty-title">${single ? s.emptyTitleSingle : s.emptyTitle}</h2>
+          <p class="empty-sub">${single ? s.emptySubSingle : s.emptySub}</p>
           <!-- Shared slot directly under the sub line, same contract as
                #emptyStateCorner above: core renders it always and empty,
@@ -234 +314 @@
         </div>
 
-        <!-- Only rendered for a rail-less layout (config.hideQueue), where it
-             is the session's ONLY intake control. Hosts that show the rail
-             already have one and don't need a second. -->
-        ${config.hideQueue ? `<div class="empty-drop">${dropzoneHTML("emptyDropzone", s, single)}</div>` : ""}
+        <!-- ALWAYS rendered as of #52, where it used to be hideQueue-only.
+             The empty state has no rail now (spec §2.1), so this is the
+             session's only intake control on every host — and template.js's
+             standing invariant is that there is always a visible,
+             keyboard-reachable way to add a file, because the window-level
+             drop handler is mouse-only. A rail-less empty state with no
+             dropzone would have no intake at all for a keyboard or
+             assistive-tech user. -->
+        <div class="empty-drop">${dropzoneHTML("emptyDropzone", s, single)}</div>
 
         <div class="empty-steps">
@@ -345 +430 @@
             <input type="range" class="reveal-range" id="revealRange" min="0" max="100" value="50" aria-label="Drag to compare original and compressed image">
             <div class="spinner-overlay" id="spinner" hidden>Encoding…</div>
+            <!-- ON the stage, bottom left, not under the controls (Xavier,
+                 2026-08-31). It used to be a row in the editor column, which
+                 meant a message that appears twice a session either reserved
+                 a blank line forever or moved the controls when it arrived.
+                 Absolutely positioned inside the stage it can do neither, and
+                 it reads as what it is: a note about the picture in front of
+                 you. Bottom LEFT because the two stage badges own the top
+                 corners and the loupe grip owns the middle. -->
+            <div class="codec-status-line" id="codecStatus"></div>
           </div>
         </div>
@@ -384 +478 @@
 
           <div class="action-group">
-            <!-- Apply-to-all is a modifier on the primary button, not a
-                 button of its own. As a peer button it competed with
-                 Next file at the same weight and promoted the one path
-                 that skips crop and per-image control — which is Quick
-                 Process's job (roadmap #17), not this button's. Ticking
-                 it turns Next file into Finalize, so the batch commit and
-                 the finalize modal are one action instead of two. -->
-            <label class="checkbox-row applyall-row" id="applyAllRow" hidden>
-              <input type="checkbox" id="applyAllCheck">
-              Apply to all
-            </label>
+            <!-- Two named paths, not one button plus a modifier
+                 (2026-08-30). Apply-to-all was a checkbox here from
+                 2026-08-11: as a peer button it had competed with Next
+                 file at equal weight and promoted the path that skips
+                 crop and per-image control, which was Quick Process's
+                 job. BOTH halves of that reasoning expired in 1.4.0 —
+                 crop moved to the free tier and Quick Process moved to
+                 Pro — which left the free tier with no batch-shaped
+                 affordance at all, only a checkbox you had to already
+                 know to look for. So the batch path gets its own button
+                 and its own name again. Next file keeps the neutral
+                 weight; Process all takes the accent, the same purple
+                 the old Finalize state used, so the two paths read as a
+                 choice rather than a button and its modifier.
+
+                 #applyAllCheck survives as a hidden input, NOT as dead
+                 markup: it is still what applyAllMode() reads, which is
+                 what commitAll() and Pro presets both key off. Process
+                 all sets it. Keeping one flag means there is still
+                 exactly one definition of "this run covers the queue". -->
+            <input type="checkbox" id="applyAllCheck" hidden>
+            <!-- The [Grid] button used to sit here, leftmost, as the pure
+                 NAVIGATION step in 1.4.2's rising-commitment order. It moved
+                 to the header's view switch: the way between two peer views
+                 has to exist in BOTH of them and in the same place, and this
+                 group only exists in one. What is left is the two buttons
+                 that commit, which is a more honest group than the one that
+                 mixed navigation in with them:
+                   [Next file →]      [Process all]
+                    commit + advance   commit all + finalize
+                 Escape still backs out to the grid (app.js) — it is the same
+                 destination, reached the way Escape is reached everywhere. -->
             <button class="btn" id="itemActionBtn">
               ${config.icons.itemAction}
               ${s.itemAction}
             </button>
-            <button class="btn primary" id="nextBtn">
-              <span id="nextBtnLabel">Next file</span>
-              <svg id="nextBtnArrowIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="m13 6 6 6-6 6"/></svg>
-              <svg id="nextBtnFinalizeIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" hidden><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>
+            <button class="btn" id="nextBtn">
+              <span>Next file</span>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="m13 6 6 6-6 6"/></svg>
+            </button>
+            <button class="btn accent" id="processAllBtn">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>
+              <span id="processAllBtnLabel">${s.processAllAction}</span>
             </button>
           </div>
         </div>
-        <div class="codec-status-line" id="codecStatus"></div>
+      </div>
+
+      <!-- BATCH MODE (roadmap #51) — a PEER of #editorContent, not a child,
+           and that is the design (spec §2). An earlier prototype swapped only
+           the middle of the editor and kept one chrome; it failed three ways
+           from that single cause — the file heading read "sunset.jpg · 1 of
+           12" over a grid of twelve, "Next file" had no referent, and the
+           tool pills stayed live over a still-set currentId so Crop would
+           have entered crop mode on an image the user wasn't looking at.
+           Sharing no chrome removes all three by construction: batch mode has
+           no current image, so no control that assumes one exists here to be
+           wrong.
+           The vertical rhythm still mirrors the editor's — content on top,
+           settings below — so the two modes read as the same application. -->
+      <div class="batch-mode" id="batchMode" hidden>
+        <!-- PERMANENT, not dismissed after the first open (Xavier's call). It
+             is the only thing that says a tile is a door on a TOUCH screen,
+             where the hover pill never appears and native drag-reorder does
+             not exist either — so the one audience that cannot discover this
+             any other way is the one that would lose it. -->
+        <p class="batch-hint">Click an image to edit it on its own</p>
+        <div class="batch-grid" id="batchGrid"></div>
+
+        <div class="batch-settings">
+          <div class="batch-settings-head">
+            <!-- The heading carries the label the tablist used to (#51). With
+                 every feature on screen at once there is no tab strip left to
+                 name the region, and a bar of six unlabelled cards under a
+                 grid of images needs one line saying what it governs. -->
+            <h3 class="batch-settings-title">Batch settings</h3>
+            <!-- THE SET, AND THE WAY OUT OF IT (Xavier, 2026-08-31). These
+                 two had a band of their own above the grid, which cost a
+                 whole row of tiles to say one number and offer one button.
+                 The settings head already spans the app and had room, and
+                 both of these describe the same thing the cards below
+                 configure — the batch — so this is where they belong.
+
+                 "10 images", not "10 in queue", and "Clear images", not
+                 "Clear queue": a queue is a line of things waiting their turn,
+                 which is what the rail is — you walk it one at a time. Batch
+                 mode is the opposite, one pass over a set, so the set is what
+                 the words name.
+
+                 NO "done" COUNT. It read "0 done" for the entire life of the
+                 mode, because batch mode is one shot — you configure, you hit
+                 Process all, and the next thing you see is the finalize
+                 modal. A counter that only ever says zero is furniture. -->
+            <!-- Grouped so the two of them can be ONE row on a narrow
+                 window. Below 700px the head unwraps itself into the settings
+                 column (display:contents) and every child becomes its own
+                 row — which is right for the title and the Pro buttons, and
+                 wrong for these two, which belong side by side. -->
+            <div class="batch-summary">
+            <span class="stat-pill batch-count-pill">
+              <span class="icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h10"/></svg></span>
+              <b id="batchCount">0</b> <span id="batchCountLabel">images</span>
+            </span>
+            <!-- NO SAVINGS READOUT HERE, deliberately (Xavier, 2026-09-01).
+                 It summed only finished items while sitting beside a count of
+                 the whole queue, so one finished file out of six read as the
+                 batch's total. The deeper reason it went rather than got
+                 fixed: a running saving is an encode-as-you-go idea, and this
+                 mode does not encode as it goes. Grid configures once and runs
+                 once, so the number that matters arrives complete, in the
+                 finalize modal, at the moment it becomes true. Preview keeps
+                 its own — see #statSavings in the rail. -->
+            <!-- Beside Clear images because they are the same KIND of thing —
+                 one undoes the edits, the other undoes the queue — and a user
+                 looking for either is looking in the same place. Reset is the
+                 milder of the two so it goes first.
+                 The cards each carry their own Reset; this is the one that
+                 also reaches per-image state no card represents (Upscale is
+                 the case that forced it — a preset can apply it across the
+                 queue and nothing here could take it back off). -->
+            <button class="clear-queue-btn" id="batchResetBtn" type="button" title="Put every image back to how it arrived">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>
+              Reset all
+            </button>
+            <button class="clear-queue-btn" id="batchClearBtn" type="button">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg>
+              Clear images
+            </button>
+            </div>
+            <!-- The two Pro features live in the head rather than in a card
+                 of their own: they are buttons, not fields, and the head had
+                 the room the cards row did not want to give them. -->
+            <div class="batch-tools" id="batchTools"></div>
+            <div class="spacer"></div>
+            <button class="btn accent" id="batchProcessAllBtn" type="button">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>
+              <span id="batchProcessAllLabel">${s.processAllAction}</span>
+            </button>
+          </div>
+          <!-- CARDS, NOT TABS (Xavier, 2026-08-31). Five of the six batch
+               features fit side by side at any width the app is usable at,
+               and a tab strip was spending the bar's whole height on one of
+               them while the other five sat behind a click. See
+               batch-panel.js for what each card is and why the two Pro
+               features stayed behind a button instead. -->
+          <div class="batch-cards" id="batchCards"></div>
+        </div>
+      </div>
+
+      <!-- The two CENTRED alerts live inside the editor panel as of #52
+           (spec §2.5), because that is what they are centred on. They were
+           viewport-fixed at left:calc(50% + 155px) — half the rail,
+           hardcoded — which was right only while the rail was always there.
+           Absolute inside the column they describe, they cannot be wrong
+           again. The corner pill (#toast) and the batch progress bar are
+           deliberately left outside: neither is centred on anything. -->
+      <div class="center-toast" id="centerToast" role="status">
+        <span class="center-toast-icon" id="centerToastIcon" aria-hidden="true"></span>
+        <span class="center-toast-msg" id="centerToastMsg"></span>
+      </div>
+
+      <div class="notice-toast" id="capNotice" role="status">
+        <div class="notice-title" id="capNoticeTitle">Image scaled</div>
+        <div class="notice-body" id="capNoticeBody"></div>
       </div>
     </main>
+
   </div>
 
+  <!-- THE FOOTER (#52, spec §2.3). Rendered on every surface, because the
+       promise matters on every surface — and because it replaces TWO copies
+       of it: the note used to render once in the rail and once again as a
+       a .privacy-note-mobile twin, with CSS choosing per breakpoint.
+       The left string stays tier-aware and that is not cosmetic: free reads
+       "Free forever…", licensed and trial read "Private by design…". Shown to
+       a subscriber, "Free forever" says Pro is now free (src/web/main.js).
+       This changes WHERE the string renders and nothing about which one. -->
+  <footer class="app-footer">
+    ${privacyNoteHTML(s)}
+    <div class="spacer"></div>
+    <!-- Host slot. The web build moves index.html's existing .made-by-menu
+         node in here rather than re-emitting the links from JS: one copy,
+         still in the static HTML, and it degrades to the bottom of the body
+         flex column if the app never boots. WordPress leaves it empty. -->
+    <div class="app-footer-slot" id="appFooterSlot"></div>
+  </footer>
+
   <div class="toast" id="toast" role="status"></div>
-
-  <!-- The prominent half of the toast pair (app.js showCenterToast). The
-       pill above stays for repetitive, low-stakes confirmations; this one
-       is for the moments worth interrupting for — a batch finishing, a
-       preset landing, a session coming back, a failure. Centered over the
-       editor column, same as #capNotice. -->
-  <div class="center-toast" id="centerToast" role="status">
-    <span class="center-toast-icon" id="centerToastIcon" aria-hidden="true"></span>
-    <span class="center-toast-msg" id="centerToastMsg"></span>
-  </div>
-
-  <div class="notice-toast" id="capNotice" role="status">
-    <div class="notice-title" id="capNoticeTitle">Image scaled</div>
-    <div class="notice-body" id="capNoticeBody"></div>
-  </div>
 
   <div class="progress-toast" id="applyProgressToast">
@@ -475 +714 @@
         </div>
 
-        <label class="checkbox-row resize-applyall-row">
+        <!-- Hidden outright on a one-image queue: "all images" is a promise
+             about a batch that isn't there, and leaving it visible-but-inert
+             was one more control to read past on the single-image path. -->
+        <label class="checkbox-row resize-applyall-row" id="resizeApplyAllRow">
           <input type="checkbox" id="resizeApplyAllCheck">
           Apply resize to all images
@@ -542 +784 @@
     api.registerSourceRect((item) => item.crop || null);
     api.registerOriginalURL((item) => item.cropDisplayURL || null);
+    api.registerItemThumb((item) => {
+      if (item.crop && !item.cropDisplayURL) {
+        const sig = `${item.crop.x},${item.crop.y},${item.crop.w},${item.crop.h}`;
+        if (!item._cropBaking && item._cropBakeFailed !== sig) {
+          item._cropBaking = sig;
+          bakeOriginal(item);
+        }
+      }
+      return item.cropDisplayURL || null;
+    });
     api.registerItemBadge((item) => {
       if (!item.crop) return null;
@@ -567 +819 @@
     api.el("entryRow").insertBefore(entry, api.el("resizeEntry"));
     const entryBtn = entry.querySelector(".sqfy-crop-entry-btn");
-    const entryLabel = entry.querySelector(".sqfy-crop-entry-label");
     const clearBtn = entry.querySelector(".sqfy-crop-clear-btn");
     function markPreviewStale(item) {
@@ -588 +839 @@
       const has = !!(item && item.crop);
       entry.classList.toggle("active", has);
-      entryLabel.textContent = has ? item.cropAspect || "Cropped" : "Crop";
+      entryBtn.title = has ? "Crop — " + (item.cropAspect || "custom") : "Crop";
       clearBtn.hidden = !has;
     }
     function bakeOriginal(item) {
       const c = item.crop;
-      if (!c || !item.imgEl) return;
-      const { el: srcEl, w: natW, h: natH } = api.getPixelSource(item);
-      const out = croppedDims(item);
-      const canvas = document.createElement("canvas");
-      canvas.width = out.w;
-      canvas.height = out.h;
-      canvas.getContext("2d").drawImage(srcEl, c.x * natW, c.y * natH, Math.max(1, c.w * natW), Math.max(1, c.h * natH), 0, 0, out.w, out.h);
-      canvas.toBlob((blob) => {
-        if (!blob || !item.crop) return;
-        if (item.cropDisplayURL) URL.revokeObjectURL(item.cropDisplayURL);
-        item.cropDisplayURL = URL.createObjectURL(blob);
-        const current = api.getCurrentItem();
-        if (current && current.id === item.id && !active) {
-          imgOriginal.src = item.cropDisplayURL;
+      if (!c || !item.imgEl) {
+        item._cropBaking = null;
+        return;
+      }
+      item.thumbBusy = (item.thumbBusy || 0) + 1;
+      api.scheduleQueueRefresh();
+      api.queueThumbJob((done) => {
+        const crop = item.crop;
+        if (!crop || !item.imgEl) {
+          item.thumbBusy = Math.max(0, (item.thumbBusy || 1) - 1);
+          item._cropBaking = null;
+          api.scheduleQueueRefresh();
+          done();
+          return;
         }
-      }, "image/png");
+        const { el: srcEl, w: natW, h: natH } = api.getPixelSource(item);
+        const out = croppedDims(item);
+        const canvas = document.createElement("canvas");
+        canvas.width = out.w;
+        canvas.height = out.h;
+        canvas.getContext("2d").drawImage(
+          srcEl,
+          crop.x * natW,
+          crop.y * natH,
+          Math.max(1, crop.w * natW),
+          Math.max(1, crop.h * natH),
+          0,
+          0,
+          out.w,
+          out.h
+        );
+        canvas.toBlob((blob) => {
+          item.thumbBusy = Math.max(0, (item.thumbBusy || 1) - 1);
+          const sig = item._cropBaking;
+          item._cropBaking = null;
+          if (!blob || !item.crop) {
+            if (!blob && sig) item._cropBakeFailed = sig;
+            api.scheduleQueueRefresh();
+            done();
+            return;
+          }
+          item._cropBakeFailed = null;
+          if (item.cropDisplayURL) URL.revokeObjectURL(item.cropDisplayURL);
+          item.cropDisplayURL = URL.createObjectURL(blob);
+          const current = api.getCurrentItem();
+          if (current && current.id === item.id && !active) {
+            imgOriginal.src = item.cropDisplayURL;
+          }
+          api.scheduleQueueRefresh();
+          done();
+        }, "image/png");
+      });
     }
     function clearCrop(item) {
@@ -761 +1048 @@
       api.refreshControls();
     }
+    function applyRatioToItem(item, ratio, label, exact, { skipMatching = false, keepBake = false } = {}) {
+      if (!item.width) return false;
+      if (skipMatching && item.crop && item.cropAspect === label) return false;
+      let w, h;
+      if (exact && exact.w <= item.width && exact.h <= item.height) {
+        w = exact.w;
+        h = exact.h;
+      } else {
+        w = Math.min(item.width, item.height * ratio);
+        h = w / ratio;
+      }
+      const nw = Math.min(1, w / item.width);
+      const nh = Math.min(1, h / item.height);
+      item.crop = { x: (1 - nw) / 2, y: (1 - nh) / 2, w: nw, h: nh };
+      item.cropAspect = label;
+      markPreviewStale(item);
+      if (!keepBake && item.cropDisplayURL) {
+        URL.revokeObjectURL(item.cropDisplayURL);
+        item.cropDisplayURL = null;
+      }
+      return true;
+    }
     function applyCropToAll(source) {
       const d = croppedDims(source);
       const ratio = d.w / d.h;
       api.eachItem((item) => {
-        if (item.id === source.id || !item.width) return;
-        let w, h;
-        if (d.w <= item.width && d.h <= item.height) {
-          w = d.w;
-          h = d.h;
-        } else {
-          w = Math.min(item.width, item.height * ratio);
-          h = w / ratio;
-        }
-        const nw = Math.min(1, w / item.width);
-        const nh = Math.min(1, h / item.height);
-        item.crop = { x: (1 - nw) / 2, y: (1 - nh) / 2, w: nw, h: nh };
-        item.cropAspect = aspectLabel;
-        markPreviewStale(item);
-        if (item.cropDisplayURL) {
-          URL.revokeObjectURL(item.cropDisplayURL);
-          item.cropDisplayURL = null;
+        if (item.id === source.id) return;
+        applyRatioToItem(item, ratio, aspectLabel, d);
+      });
+    }
+    function applyRatioToAll(label) {
+      if (!label) {
+        api.eachItem((item) => clearCrop(item));
+        return;
+      }
+      const ratio = RATIOS[label];
+      if (!ratio) return;
+      api.eachItem((item) => {
+        if (applyRatioToItem(item, ratio, label, null, { skipMatching: true, keepBake: true })) {
+          bakeOriginal(item);
         }
       });
-    }
+      const current = api.getCurrentItem();
+      if (current) {
+        updateEntry(current);
+        api.requestEncode();
+      }
+      api.refreshQueue();
+      api.refreshControls();
+    }
+    api.registerFeatureData("batchCrop", {
+      get: () => {
+        let label;
+        let uniform = true;
+        let seen2 = false;
+        api.eachItem((item) => {
+          const l = item.crop ? item.cropAspect || "" : null;
+          if (!seen2) {
+            label = l;
+            seen2 = true;
+          } else if (l !== label) {
+            uniform = false;
+          }
+        });
+        return uniform && label ? label : null;
+      },
+      set: (label) => applyRatioToAll(label)
+    });
     function onModeKeydown(e) {
       const inInput = e.target === wInput || e.target === hInput;
@@ -977 +1308 @@
     entryBtn.addEventListener("click", () => {
       if (active) exitMode(false);
-      else enterMode();
+      else {
+        api.noteToolUsed("crop");
+        enterMode();
+      }
     });
     clearBtn.addEventListener("click", () => clearCrop(api.getCurrentItem()));
@@ -1029 +1363 @@
     api.el("entryRow").insertBefore(entry, api.el("resizeEntry"));
     const entryBtn = entry.querySelector(".sqfy-rename-entry-btn");
-    const entryLabel = entry.querySelector(".sqfy-rename-entry-label");
     const clearBtn = entry.querySelector(".sqfy-rename-clear-btn");
     function updateEntry(item) {
       const has = !!(item && item.outputName);
       entry.classList.toggle("active", has);
-      entryLabel.textContent = has ? "Renamed" : "Rename";
+      entryBtn.title = has ? "Rename — " + item.outputName : "Rename";
       clearBtn.hidden = !has;
     }
@@ -1111 +1444 @@
     let lastPad = null;
     let mode = "single";
+    let modeChosen = false;
     let padTouched = false;
     let manualInputs = [];
@@ -1127 +1461 @@
         pattern = p ? { base: p.base || "", start: p.start || 1, pad: p.pad || 1 } : null;
         applyPattern();
+      }
+    });
+    api.registerFeatureData("batchRename", {
+      get: () => pattern,
+      set: (p) => {
+        if (p && p.base) {
+          pattern = { base: p.base, start: Number.isFinite(p.start) ? p.start : 1, pad: p.pad || 1 };
+          applyPattern();
+        } else {
+          api.eachItem((i) => {
+            i.outputName = null;
+          });
+          pattern = null;
+        }
+        updateEntry(api.getCurrentItem());
+        api.refreshQueue();
       }
     });
@@ -1376 +1726 @@
     }
     modeBtns.forEach((b) => {
-      b.addEventListener("click", () => setMode(b.dataset.mode));
+      b.addEventListener("click", () => {
+        modeChosen = true;
+        setMode(b.dataset.mode);
+      });
     });
     modesRow.addEventListener("keydown", (e) => {
@@ -1383 +1736 @@
       const i = MODES.indexOf(mode);
       const next = MODES[(i + (e.key === "ArrowRight" ? 1 : MODES.length - 1)) % MODES.length];
+      modeChosen = true;
       setMode(next, { focus: false });
       modeBtns[MODES.indexOf(next)].focus();
@@ -1398 +1752 @@
       padInput.value = lastPad !== null ? lastPad : autoPad();
       backdrop.hidden = false;
-      setMode(multi ? mode : "single", { animate: false });
+      const opening = multi ? modeChosen ? mode : "sequence" : "single";
+      setMode(opening, { animate: false });
       document.addEventListener("keydown", onModalKeydown, true);
     }
@@ -1474 +1829 @@
       pressedOnBackdrop = false;
     });
-    entryBtn.addEventListener("click", openModal);
+    entryBtn.addEventListener("click", () => {
+      api.noteToolUsed("rename");
+      openModal();
+    });
     function clearRename(item) {
       if (item) item.outputName = null;
@@ -1494 +1852 @@
   }
 };
+const CHEVRON_ICON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>';
+const SIZE_ICON = '<svg class="resize-btn-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>';
+const FORMAT_ICON = '<svg class="resize-btn-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9h13l-3.5-3.5"/><path d="M20 15H7l3.5 3.5"/></svg>';
+function sanitizePrefix(v) {
+  return String(v || "").replace(/\s+/g, "-").replace(/[^a-zA-Z0-9._-]/g, "").replace(/^[.\-_]+/, "").replace(/\.+$/, "");
+}
+const BUILDERS = {
+  // The output codec. The one field every consumer wants.
+  // `label: ''` drops the visible label — bulk mode's cards are already
+  // headed by the feature they hold, so a Format card containing a field
+  // labelled Format says it twice (Xavier, 2026-08-31). Quick Process stacks
+  // its fields in one unheaded column and still needs it, which is why this is
+  // an option and not a removal. The name moves to aria-label rather than
+  // disappearing: the select still has to identify itself to a screen reader,
+  // which cannot see the card heading two elements up.
+  format(api, opts, id, emit) {
+    const name = void 0 === opts.label ? "Format" : opts.label;
+    const el = document.createElement("div");
+    el.className = "control";
+    el.innerHTML = `
+      ${name ? `<label for="${id}">${name}</label>` : ""}
+      <div class="select-wrap">
+        <select id="${id}"${name ? "" : ' aria-label="Format"'}></select>
+        <span class="select-chevron" aria-hidden="true">${CHEVRON_ICON}</span>
+      </div>`;
+    const select = el.querySelector("select");
+    ALL_FORMATS.forEach((fmt) => {
+      const opt = document.createElement("option");
+      opt.value = fmt;
+      opt.textContent = FORMAT_LABELS[fmt];
+      select.appendChild(opt);
+    });
+    select.value = opts.value || api.defaultSettings().format;
+    select.addEventListener("change", () => emit("format"));
+    return { el, get: () => select.value, set: (v) => {
+      if (v) select.value = v;
+    } };
+  },
+  quality(api, opts, id, emit) {
+    const el = document.createElement("div");
+    el.className = "control quality-control";
+    el.innerHTML = `
+      <label for="${id}">Quality</label>
+      <div class="quality-row">
+        <input type="range" class="quality-slider" id="${id}" min="1" max="100" value="50">
+        <span class="quality-value">50</span>
+      </div>`;
+    const slider = el.querySelector("input");
+    const value = el.querySelector(".quality-value");
+    slider.addEventListener("input", () => {
+      value.textContent = slider.value;
+      api.paintSlider(slider);
+      emit("quality");
+    });
+    return {
+      el,
+      get: () => parseInt(slider.value, 10),
+      set: (v) => {
+        if (!Number.isFinite(v)) return;
+        slider.value = String(v);
+        value.textContent = slider.value;
+        api.paintSlider(slider);
+      },
+      // PNG is lossless — its quality knob does nothing, and the editor's own
+      // controls bar has hidden it since the format strip was streamlined
+      // (#34). Same rule here, for the same reason: a control that cannot
+      // affect the output is worse than an absent one.
+      sync: (ctx) => {
+        el.hidden = "png" === ctx.format;
+      }
+    };
+  },
+  // Effort is the one field whose RANGE depends on the format — each codec's
+  // scale is its own (EFFORT_SCALES), and JPEG has none at all.
+  //
+  // Deliberately NOT clamped here by the per-image megapixel limit the editor
+  // applies (effortLimitFor in app.js). A batch has no single image to measure,
+  // and core already clamps per item at encode time through effectiveEffort —
+  // so showing the codec's full scale is honest and the encode stays safe.
+  effort(api, opts, id, emit) {
+    const el = document.createElement("div");
+    el.className = "control quality-control";
+    el.innerHTML = `
+      <label for="${id}">Effort</label>
+      <div class="quality-row">
+        <input type="range" class="quality-slider" id="${id}" min="1" max="6" value="4">
+        <span class="quality-value">4</span>
+      </div>`;
+    const slider = el.querySelector("input");
+    const value = el.querySelector(".quality-value");
+    slider.addEventListener("input", () => {
+      value.textContent = slider.value;
+      api.paintSlider(slider);
+      emit("effort");
+    });
+    return {
+      el,
+      get: () => parseInt(slider.value, 10),
+      set: (v) => {
+        if (!Number.isFinite(v)) return;
+        slider.value = String(v);
+        value.textContent = slider.value;
+        api.paintSlider(slider);
+      },
+      sync: (ctx) => {
+        const scale = EFFORT_SCALES[ctx.format];
+        el.hidden = !scale;
+        if (!scale) return;
+        slider.min = String(scale.min);
+        slider.max = String(scale.max);
+        if (parseInt(slider.value, 10) > scale.max) slider.value = String(scale.max);
+        value.textContent = slider.value;
+        api.paintSlider(slider);
+      }
+    };
+  },
+  // Max width. `units: ['px']` renders the bare number field Quick Process has
+  // always had; the default pair renders the unit switch too, matching the
+  // Resize modal's own px/% choice.
+  size(api, opts, id, emit) {
+    const units = opts.units || ["px", "%"];
+    const el = document.createElement("div");
+    el.className = "control";
+    el.innerHTML = `
+      <label for="${id}">${opts.label || "Max width"}</label>
+      <div class="batch-size-row">
+        <input type="number" id="${id}" placeholder="${opts.placeholder || "no resize"}" min="1">
+        ${units.length > 1 ? `<div class="select-wrap">
+                 <select class="batch-size-unit" aria-label="Resize unit">
+                   ${units.map((u) => `<option value="${u}">${u}</option>`).join("")}
+                 </select>
+                 <span class="select-chevron" aria-hidden="true">${CHEVRON_ICON}</span>
+               </div>` : ""}
+      </div>`;
+    const input = el.querySelector("input");
+    const unitSelect = el.querySelector(".batch-size-unit");
+    const unit = () => unitSelect ? unitSelect.value : units[0];
+    const clamp2 = () => {
+      if ("%" !== unit()) return;
+      const n = parseInt(input.value, 10);
+      if (Number.isFinite(n) && n > 100) input.value = "100";
+    };
+    input.addEventListener("input", () => {
+      clamp2();
+      emit("size");
+    });
+    if (unitSelect) {
+      unitSelect.addEventListener("change", () => {
+        clamp2();
+        emit("size");
+      });
+    }
+    return {
+      el,
+      // null means "no resize", exactly as a blank field reads.
+      get: () => {
+        const n = parseInt(input.value, 10);
+        return Number.isFinite(n) && n > 0 ? { value: n, unit: unit() } : null;
+      },
+      set: (v) => {
+        input.value = v && v.value ? String(v.value) : "";
+        if (unitSelect && v && v.unit && units.includes(v.unit)) unitSelect.value = v.unit;
+      }
+    };
+  },
+  // Rename, cut to the one mode that is a pure function of the batch.
+  // "This image" and the manual per-image list both need an image to point at,
+  // which a batch form does not have — the same reasoning that gave Quick
+  // Process a prefix field and nothing else.
+  //
+  // `full: true` adds start and padding, which bulk mode can offer because it
+  // is configured against a queue that already exists. Quick Process cannot:
+  // it is filled in against an empty queue, so the pad genuinely isn't
+  // knowable until the drop lands (rename's autoPad resolves it at run time).
+  rename(api, opts, id, emit) {
+    const full = !!opts.full;
+    const el = document.createElement("div");
+    el.className = "control";
+    el.innerHTML = `
+      <label for="${id}">${opts.label || "Rename prefix"}</label>
+      <div class="batch-rename-row">
+        <input type="text" id="${id}" placeholder="no rename" autocomplete="off" spellcheck="false">
+        ${full ? `<label class="batch-subfield">Start
+                 <input type="number" class="batch-rename-start" min="0" value="1">
+               </label>
+               <label class="batch-subfield">Digits
+                 <input type="number" class="batch-rename-pad" min="1" max="6" value="1">
+               </label>` : ""}
+      </div>
+      <p class="sqfy-bf-hint" style="visibility:hidden"></p>`;
+    const base = el.querySelector('input[type="text"]');
+    const startInput = el.querySelector(".batch-rename-start");
+    const padInput = el.querySelector(".batch-rename-pad");
+    const hint = el.querySelector(".sqfy-bf-hint");
+    const num = (input, fallback) => {
+      const n = input ? parseInt(input.value, 10) : NaN;
+      return Number.isFinite(n) && n >= 0 ? n : fallback;
+    };
+    function renderHint() {
+      const b = sanitizePrefix(base.value);
+      hint.style.visibility = b ? "" : "hidden";
+      if (!b) return;
+      if (full) {
+        const start = num(startInput, 1);
+        const pad = Math.min(num(padInput, 1) || 1, 6);
+        const at = (i) => b + String(start + i).padStart(pad, "0");
+        hint.textContent = `${at(0)}, ${at(1)}, ${at(2)}…`;
+      } else {
+        hint.textContent = `${b}1, ${b}2, ${b}3… (zero-padded to fit the batch)`;
+      }
+    }
+    [base, startInput, padInput].forEach((input) => {
+      if (!input) return;
+      input.addEventListener("input", () => {
+        renderHint();
+        emit("rename");
+      });
+    });
+    return {
+      el,
+      // null means "no rename", matching the size field above it.
+      get: () => {
+        const b = sanitizePrefix(base.value);
+        if (!b) return null;
+        return { base: b, start: num(startInput, 1), pad: Math.min(num(padInput, 1) || 1, 6) };
+      },
+      set: (v) => {
+        base.value = v && v.base ? v.base : "";
+        if (startInput) startInput.value = String(v && v.start !== void 0 ? v.start : 1);
+        if (padInput) padInput.value = String(v && v.pad ? v.pad : 1);
+        renderHint();
+      },
+      hint: renderHint
+    };
+  }
+};
+function createBatchFields(api, spec, { prefix = "bf", onChange } = {}) {
+  const fields = {};
+  const nodes = [];
+  let ready = false;
+  function syncDependents() {
+    const ctx = { format: fields.format ? fields.format.get() : api.defaultSettings().format };
+    Object.values(fields).forEach((f) => {
+      if (f.sync) f.sync(ctx);
+    });
+  }
+  function emit(kind) {
+    syncDependents();
+    if (ready && onChange) onChange(kind);
+  }
+  spec.forEach((entry, i) => {
+    const opts = "string" === typeof entry ? { kind: entry } : entry;
+    const build = BUILDERS[opts.kind];
+    if (!build) return;
+    const field = build(api, opts, `${prefix}${opts.kind[0].toUpperCase()}${opts.kind.slice(1)}${i}`, emit);
+    fields[opts.kind] = field;
+    nodes.push(field.el);
+  });
+  syncDependents();
+  return {
+    fields,
+    nodes,
+    get: (kind) => fields[kind] ? fields[kind].get() : void 0,
+    set(values = {}) {
+      Object.keys(values).forEach((kind) => {
+        if (fields[kind]) fields[kind].set(values[kind]);
+      });
+      syncDependents();
+    },
+    values() {
+      const out = {};
+      Object.keys(fields).forEach((kind) => {
+        out[kind] = fields[kind].get();
+      });
+      return out;
+    },
+    // Flip on once the caller's initial set() pass is done.
+    arm() {
+      ready = true;
+    }
+  };
+}
+const CROP_RATIOS = ["1:1", "4:3", "16:9"];
+function createBatchPanel(api, { cardsEl, toolsEl, extraTabs = [] }) {
+  let syncing = false;
+  const guard = (fn) => (...args) => {
+    if (!syncing) fn(...args);
+  };
+  const tabs = [];
+  const applied = { size: null, crop: null, rename: null };
+  const panel = { sync: () => {
+  } };
+  panel.resetAll = () => {
+    tabs.forEach((tab) => {
+      if (tab.reset) tab.reset();
+    });
+    api.resetAllItems();
+    panel.sync();
+  };
+  function addCard(tab) {
+    const card = document.createElement("section");
+    card.className = "batch-card";
+    card.dataset.id = tab.id;
+    const head = document.createElement("div");
+    head.className = "batch-card-head";
+    const title = document.createElement("h4");
+    title.className = "batch-card-title";
+    if (tab.icon) {
+      const icon = document.createElement("span");
+      icon.className = "batch-card-icon";
+      icon.setAttribute("aria-hidden", "true");
+      icon.innerHTML = tab.icon;
+      title.appendChild(icon);
+    }
+    title.appendChild(document.createTextNode(tab.label));
+    head.appendChild(title);
+    const body = document.createElement("div");
+    body.className = "batch-card-body";
+    if (tab.reset) head.appendChild(resetButton(tab));
+    card.appendChild(head);
+    card.appendChild(body);
+    cardsEl.appendChild(card);
+    tabs.push({ ...tab, card, body });
+    if (tab.mount) tab.mount(body, { close: () => {
+    } });
+  }
+  function resetButton(tab) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "batch-reset";
+    btn.textContent = "Reset " + tab.label;
+    btn.addEventListener("click", () => {
+      tab.reset();
+      panel.sync();
+    });
+    return btn;
+  }
+  let proSlotsEl = null;
+  function proTools(locked) {
+    if (!proSlotsEl) {
+      proSlotsEl = document.createElement("div");
+      proSlotsEl.className = "batch-pro-slots";
+      toolsEl.appendChild(proSlotsEl);
+    }
+    if (locked && !toolsEl.querySelector(".batch-pro-label")) {
+      const label = document.createElement("span");
+      label.className = "batch-pro-label";
+      label.textContent = "PRO";
+      toolsEl.prepend(label);
+    }
+    return proSlotsEl;
+  }
+  const popovers = [];
+  function closePopover(el, btn) {
+    el.hidden = true;
+    btn.classList.remove("is-open");
+    btn.setAttribute("aria-expanded", "false");
+  }
+  function closePopovers() {
+    popovers.forEach((p) => closePopover(p.el, p.btn));
+  }
+  function addProTab(tab) {
+    const slots = proTools(tab.locked);
+    const slot = document.createElement("div");
+    slot.className = "batch-pro-slot";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "batch-pro-btn" + (tab.locked ? " is-locked" : "");
+    if (tab.icon) {
+      const icon = document.createElement("span");
+      icon.className = "batch-pro-btn-icon";
+      icon.setAttribute("aria-hidden", "true");
+      icon.innerHTML = tab.icon;
+      btn.appendChild(icon);
+    }
+    btn.appendChild(document.createTextNode(tab.label));
+    slot.appendChild(btn);
+    if (tab.locked) {
+      btn.addEventListener("click", () => tab.onClick && tab.onClick());
+      slots.appendChild(slot);
+      tabs.push({ ...tab, body: null });
+      return;
+    }
+    const pop = document.createElement("div");
+    pop.className = "batch-pop";
+    pop.hidden = true;
+    const popHead = document.createElement("div");
+    popHead.className = "batch-pop-head";
+    const popTitle = document.createElement("span");
+    popTitle.className = "batch-pop-title";
+    popTitle.textContent = tab.label;
+    popHead.appendChild(popTitle);
+    if (tab.reset) popHead.appendChild(resetButton(tab));
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "batch-pop-close";
+    closeBtn.setAttribute("aria-label", "Close " + tab.label);
+    closeBtn.title = "Close";
+    closeBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>';
+    closeBtn.addEventListener("click", () => {
+      closePopover(pop, btn);
+      btn.focus();
+    });
+    popHead.appendChild(closeBtn);
+    const body = document.createElement("div");
+    body.className = "batch-card-body batch-pop-body";
+    pop.appendChild(popHead);
+    pop.appendChild(body);
+    slot.appendChild(pop);
+    slots.appendChild(slot);
+    btn.setAttribute("aria-haspopup", "true");
+    btn.setAttribute("aria-expanded", "false");
+    btn.addEventListener("click", () => {
+      const open = pop.hidden;
+      closePopovers();
+      pop.hidden = !open;
+      btn.classList.toggle("is-open", open);
+      btn.setAttribute("aria-expanded", String(open));
+    });
+    pop.addEventListener("click", (e) => e.stopPropagation());
+    popovers.push({ el: pop, btn });
+    tabs.push({ ...tab, body });
+    if (tab.mount) tab.mount(body, { close: () => closePopover(pop, btn) });
+  }
+  document.addEventListener("click", (e) => {
+    if (popovers.some((p) => p.btn === e.target || p.btn.contains(e.target))) return;
+    closePopovers();
+  });
+  document.addEventListener("keydown", (e) => {
+    if ("Escape" !== e.key) return;
+    if (popovers.every((p) => p.el.hidden)) return;
+    closePopovers();
+  });
+  const addTab = (tab) => tab.pro ? addProTab(tab) : addCard(tab);
+  const encodeFields = createBatchFields(api, [{ kind: "format", label: "" }, "quality", "effort"], {
+    prefix: "batch",
+    onChange: guard((kind) => {
+      const v = encodeFields.values();
+      if ("format" === kind) {
+        api.applySettings({ format: v.format, quality: v.quality });
+        syncing = true;
+        encodeFields.set({ effort: api.getSettings().effort[v.format] });
+        syncing = false;
+        return;
+      }
+      api.applySettings({ format: v.format, quality: v.quality, effort: { [v.format]: v.effort } });
+    })
+  });
+  const sizeFields = createBatchFields(api, [{ kind: "size", label: "Max width" }], {
+    prefix: "batch",
+    onChange: guard(() => {
+      applied.size = sizeFields.get("size");
+      api.applyResizeToAll(applied.size);
+    })
+  });
+  const renameFields = createBatchFields(api, [{ kind: "rename", full: true, label: "Sequence prefix" }], {
+    prefix: "batch",
+    onChange: guard(() => {
+      applied.rename = renameFields.get("rename");
+      api.setFeatureData("batchRename", applied.rename);
+    })
+  });
+  const cropBody = document.createElement("div");
+  cropBody.className = "control";
+  cropBody.innerHTML = `
+    <label>Crop every image to</label>
+    <div class="batch-ratios" role="group" aria-label="Batch crop ratio"></div>`;
+  const ratiosEl = cropBody.querySelector(".batch-ratios");
+  const ratioBtns = ["off", ...CROP_RATIOS].map((key) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "batch-ratio";
+    b.dataset.ratio = key;
+    b.textContent = "off" === key ? "Off" : key;
+    b.addEventListener("click", () => {
+      if (syncing) return;
+      applied.crop = "off" === key ? null : key;
+      api.setFeatureData("batchCrop", applied.crop);
+      syncCrop();
+    });
+    ratiosEl.appendChild(b);
+    return b;
+  });
+  function syncCrop() {
+    let current = api.getFeatureData("batchCrop");
+    if (!current) {
+      let aspect;
+      let uniform = true;
+      let seen2 = false;
+      api.eachItem((item) => {
+        const a = item.crop ? item.cropAspect || "" : "off";
+        if (!seen2) {
+          aspect = a;
+          seen2 = true;
+        } else if (a !== aspect) {
+          uniform = false;
+        }
+      });
+      current = seen2 && uniform ? aspect : "";
+    }
+    ratioBtns.forEach((b) => b.classList.toggle("is-active", b.dataset.ratio === current));
+  }
+  extraTabs.slice().sort((a, b) => ("start" === a.order ? -1 : 0) - ("start" === b.order ? -1 : 0)).forEach(addTab);
+  addTab({
+    id: "format",
+    label: "Format",
+    icon: FORMAT_ICON,
+    mount: (body) => encodeFields.nodes.forEach((n) => body.appendChild(n)),
+    reset: () => {
+      const d = api.defaultSettings();
+      api.applySettings({ format: d.format, quality: d.quality, effort: d.effort });
+    }
+  });
+  addTab({
+    id: "size",
+    label: "Size",
+    icon: SIZE_ICON,
+    mount: (body) => sizeFields.nodes.forEach((n) => body.appendChild(n)),
+    reset: () => {
+      applied.size = null;
+      api.applyResizeToAll(null);
+    }
+  });
+  addTab({
+    id: "crop",
+    label: "Crop",
+    icon: CROP_ICON,
+    mount: (body) => body.appendChild(cropBody),
+    reset: () => {
+      applied.crop = null;
+      api.setFeatureData("batchCrop", null);
+    }
+  });
+  addTab({
+    id: "rename",
+    label: "Rename",
+    icon: RENAME_ICON,
+    mount: (body) => renameFields.nodes.forEach((n) => body.appendChild(n)),
+    reset: () => {
+      applied.rename = null;
+      api.setFeatureData("batchRename", null);
+    }
+  });
+  let lastCount = api.queueLength();
+  let running = false;
+  let growPending = false;
+  function reapplyBatch() {
+    if (applied.size) api.applyResizeToAll(applied.size);
+    if (applied.crop) api.setFeatureData("batchCrop", applied.crop);
+    if (applied.rename) api.setFeatureData("batchRename", applied.rename);
+    tabs.forEach((t) => t.onGrow && t.onGrow());
+    let undecoded = false;
+    api.eachItem((item) => {
+      if (!item.width) undecoded = true;
+    });
+    growPending = undecoded;
+  }
+  api.onChange(() => {
+    const n = api.queueLength();
+    if (n > lastCount) growPending = true;
+    lastCount = n;
+    if (!growPending || running) return;
+    running = true;
+    queueMicrotask(() => {
+      try {
+        reapplyBatch();
+      } finally {
+        running = false;
+        lastCount = api.queueLength();
+      }
+    });
+  });
+  encodeFields.arm();
+  sizeFields.arm();
+  renameFields.arm();
+  Object.assign(panel, {
+    // Re-read everything from the queue. Called on entering batch mode and on
+    // every queue change, so the panel reports what is actually set rather
+    // than what was last typed into it.
+    sync() {
+      syncing = true;
+      const s = api.getSettings();
+      encodeFields.set({ format: s.format, quality: s.quality, effort: s.effort[s.format] });
+      let resize;
+      let uniform = true;
+      let seen2 = false;
+      api.eachItem((item) => {
+        const r = item.resize ? `${item.resize.value}${item.resize.unit}` : "";
+        if (!seen2) {
+          resize = item.resize;
+          seen2 = true;
+        } else if (r !== (resize ? `${resize.value}${resize.unit}` : "")) {
+          uniform = false;
+        }
+      });
+      sizeFields.set({ size: uniform ? resize : null });
+      renameFields.set({ rename: api.getFeatureData("batchRename") });
+      syncCrop();
+      tabs.forEach((t) => t.onSync && t.onSync());
+      syncing = false;
+    }
+  });
+  return panel;
+}
+const ALPHA_CAPABLE = /\.(png|webp|avif|svg)$/i;
+const ALPHA_MIME = /* @__PURE__ */ new Set(["image/png", "image/webp", "image/avif", "image/svg+xml"]);
 const DOWNLOAD_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11"/><path d="m7.5 11 4.5 4.5L16.5 11"/><path d="M5 19h14"/></svg>';
 const DEFAULT_TIPS = [
-  '<b>Tip:</b> <span class="text-orange">Apply to all</span> lets you batch-apply format, quality, and effort to every queued image at once.',
+  '<b>Tip:</b> <span class="text-orange">Process all</span> applies your format, quality, resize and rename to every queued image in one pass.',
   '<b>Privacy:</b> No files are uploaded — your images <span class="text-orange">never leave your device</span>.',
   '<b>Tip:</b> Optimized formats like <span class="text-orange">AVIF</span> can dramatically lower your website’s loading times.',
@@ -1508 +2472 @@
 ];
 const DEFAULT_CONFIG = {
+  // Branding for the app header — and, as of #52, THE GATE ON WHETHER THERE
+  // IS ONE (template.js, app-shell-spec.md §2.2). Empty means no header, which
+  // is what both WordPress builds already were: their overlay has carried its
+  // own 48px header with the logo and the Pro badge since it shipped, so they
+  // have never passed this and must never start. One host cannot end up with
+  // two headers, because the thing that asks for one is the thing that fills
+  // it.
   brandHTML: "",
+  // Where core mounts header-level controls (today: the Grid/Preview view
+  // switch) on a host that renders its OWN header instead of taking core's.
+  // WordPress is the case: its overlay header is a SIBLING of the app root,
+  // built in src/wp/wp-app.js, so core cannot find it by id and the element
+  // has to be handed over.
+  //
+  // THE CONTRACT IS A STYLE SCOPE, not a position: the element must be, or
+  // sit inside, something carrying the `sqfy-app` class. Every rule in
+  // squishify.css is scoped under it and every design token is declared on
+  // it, so a slot outside that scope would receive the control unstyled and
+  // token-less. Hosts that take core's header leave this empty and get
+  // #appHeaderCenter instead.
+  headerSlot: null,
   // Single-image mode (docs/wordpress-pro-hooks-spec.md, shared prerequisite):
   // this session produces exactly ONE asset — the queue caps at 1, every
@@ -1569 +2553 @@
     // about limits: the queue IS capped at MAX_QUEUE_SIZE, so "no limits"
     // would be a lie; "no account, no watermarks, no uploads" are all true.
-    privacyNote: "<strong>Free forever.</strong> No account, no watermarks, no uploads — your images never leave your device.",
+    //
+    // The tail is wrapped in .privacy-rest so the footer can drop it on a
+    // narrow window and keep the LEAD, which is the part that is doing the
+    // work — "Free forever" / "Private by design" is the claim; the rest is
+    // the evidence for it, and evidence is what you cut first when there is
+    // no room. Every host's string carries the same wrapper.
+    privacyNote: '<strong>Free forever.</strong> <span class="privacy-rest">No account, no watermarks, no uploads — your images never leave your device.</span>',
+    // Empty-state hero. The TITLE is fixed on every host and every session:
+    // it is the orientation line, and a headline that varies gives a
+    // returning user a "did something change?" beat while never reliably
+    // doing the identity job. The SUB is the slot allowed to vary — core
+    // ships one plain default and never rotates on its own; the web build
+    // rotates it per session (see EMPTY_SUBS in src/web/adapter.js). Both
+    // WordPress builds deliberately stay on the single line below.
+    emptyTitle: "Let&rsquo;s prep your images",
+    emptyTitleSingle: "Let&rsquo;s prep your image",
+    emptySub: "Resize, crop, rename and optimize a whole batch — in one pass.",
+    emptySubSingle: "Resize, crop, rename and optimize — in one pass.",
     step1Desc: `Drag &amp; drop or click to add your images — up to ${MAX_QUEUE_SIZE} per batch.`,
     step3Title: "Download &amp; go!",
     step3Desc: "Download your optimized images ready for the world.",
     itemAction: "Download",
+    // The batch path's own name in the controls bar. Deliberately says what
+    // it DOES to the queue, not where the output goes — where it goes is the
+    // finalize modal's job, and that's what batchAction below names.
+    processAllAction: "Process all",
+    // What the batch button becomes once there is nothing left to walk to:
+    // every image is committed, so the only thing left is the summary.
+    finalizeAction: "Finalize",
     batchAction: "Download all (.zip)",
     // Body of the centered "Image(s) scaled" notice shown when one or more
@@ -1613 +2621 @@
   const itemThumbProviders = [];
   const rowDecorators = [];
+  const tileDecorators = [];
   const selectListeners = [];
   const itemRemovedListeners = [];
@@ -1678 +2687 @@
   }
   rootEl.classList.add("sqfy-app");
+  rootEl.classList.add("sqfy-booting");
   if (config.singleImage) {
     rootEl.classList.add("sqfy-single");
@@ -1729 +2739 @@
     console.error(e);
   }
+  let forceSingleThread = false;
   function spawnWorker() {
     worker = new Worker(new URL(
       /* @vite-ignore */
-      "" + new URL("assets/encode.worker-CNcBUqEy.js", import.meta.url).href,
+      "" + new URL("assets/encode.worker-BqxZ11_8.js", import.meta.url).href,
       import.meta.url
     ), { type: "module" });
     worker.onmessage = handleWorkerMessage;
     worker.onerror = handleWorkerError;
+    if (forceSingleThread) worker.postMessage({ type: "config", singleThread: true });
   }
   spawnWorker();
-  function abortPendingEncodes() {
-    if (pending.size === 0) return;
+  function isOutOfMemoryError(err) {
+    const msg = err && err.message || String(err || "");
+    return /out of memory|allocate .*memory|allocation failed|memory allocation/i.test(msg);
+  }
+  function enterSingleThreadMode() {
+    forceSingleThread = true;
     worker.terminate();
     const cancelled = new Error("cancelled");
@@ -1748 +2764 @@
     spawnWorker();
   }
+  const ABORT_MEGAPIXEL_FLOOR = 4;
+  function abortPendingEncodes() {
+    if (pending.size === 0) return;
+    const worthAborting = Array.from(pending.values()).some(
+      (p) => !p.warmup && p.megapixels >= ABORT_MEGAPIXEL_FLOOR
+    );
+    if (!worthAborting) return;
+    worker.terminate();
+    const cancelled = new Error("cancelled");
+    pending.forEach((p) => p.reject(cancelled));
+    pending.clear();
+    loadedCodecs.clear();
+    spawnWorker();
+  }
   function codecEncode(format, imageData, options, isWarmup = false) {
+    const megapixels = imageData.width * imageData.height / 1e6;
     return new Promise((resolve, reject) => {
       const id = ++reqId;
-      pending.set(id, { resolve, reject, warmup: isWarmup });
+      pending.set(id, { resolve, reject, warmup: isWarmup, megapixels });
       if (!loadedCodecs.has(format)) {
         codecStatusEl.textContent = `Loading ${FORMAT_LABELS[format]} codec (first use only)…`;
@@ -1891 +2922 @@
   const resizeEntry = $("resizeEntry");
   const resizeEntryBtn = $("resizeEntryBtn");
-  const resizeEntryLabel = $("resizeEntryLabel");
   const resizeEntryPencil = $("resizeEntryPencil");
   const resizeEntryClearBtn = $("resizeEntryClearBtn");
@@ -1905 +2935 @@
   const resizeCurrentSize = $("resizeCurrentSize");
   const resizeApplyAllCheck = $("resizeApplyAllCheck");
+  const resizeApplyAllRow = $("resizeApplyAllRow");
   const resizeResetBtn = $("resizeResetBtn");
   const resizeApplyBtn = $("resizeApplyBtn");
@@ -1925 +2956 @@
   const itemActionBtn = $("itemActionBtn");
   const nextBtn = $("nextBtn");
-  const nextBtnLabel = $("nextBtnLabel");
-  const nextBtnArrowIcon = $("nextBtnArrowIcon");
-  const nextBtnFinalizeIcon = $("nextBtnFinalizeIcon");
-  const applyAllRow = $("applyAllRow");
+  const processAllBtnLabel = $("processAllBtnLabel");
   const applyAllCheck = $("applyAllCheck");
-  const applyAllMode = () => !applyAllRow.hidden && applyAllCheck.checked;
+  const processAllBtn = $("processAllBtn");
+  const viewSwitch = $("viewSwitch");
+  const viewSwitchGrid = $("viewSwitchGrid");
+  const viewSwitchPreview = $("viewSwitchPreview");
+  const viewSwitchHost = $("appHeaderCenter") || config.headerSlot || null;
+  if (viewSwitchHost) viewSwitchHost.appendChild(viewSwitch);
+  else viewSwitch.remove();
+  const batchMode = $("batchMode");
+  const batchGrid = $("batchGrid");
+  const batchCount = $("batchCount");
+  const batchCountLabel = $("batchCountLabel");
+  const batchClearBtn = $("batchClearBtn");
+  const batchResetBtn = $("batchResetBtn");
+  const batchProcessAllBtn = $("batchProcessAllBtn");
+  const batchProcessAllLabel = $("batchProcessAllLabel");
+  const queuePanel = rootEl.querySelector(".queue-panel");
   const applyProgressToast = $("applyProgressToast");
   const applyProgressFill = $("applyProgressFill");
@@ -2112 +3155 @@
     );
     if (currentId !== null) {
-      emptyState.hidden = true;
-      editorContent.hidden = false;
+      showEditorSurface();
       editorContent.classList.add("is-revealing");
       editorContent.addEventListener(
@@ -2137 +3179 @@
   }
   function thumbSrcFor(item) {
-    for (let i = 0; i < itemThumbProviders.length; i++) {
-      const src = itemThumbProviders[i](item);
-      if (src) return src;
-    }
-    return item.thumbSrc;
+    let src = item.thumbSrc;
+    for (const p of itemThumbProviders) {
+      if ("source" !== p.stage) continue;
+      const next = p.fn(item);
+      if (next) {
+        src = next;
+        break;
+      }
+    }
+    for (const p of itemThumbProviders) {
+      if ("transform" !== p.stage) continue;
+      const next = p.fn(item, src);
+      if (next) src = next;
+    }
+    return src;
+  }
+  const thumbJobs = [];
+  let thumbJobRunning = false;
+  function runNextThumbJob() {
+    if (thumbJobRunning) return;
+    const job = thumbJobs.shift();
+    if (!job) return;
+    thumbJobRunning = true;
+    requestAnimationFrame(() => {
+      let settled = false;
+      const done = () => {
+        if (settled) return;
+        settled = true;
+        thumbJobRunning = false;
+        runNextThumbJob();
+      };
+      try {
+        job(done);
+      } catch {
+        done();
+      }
+    });
+  }
+  function queueThumbJob(fn) {
+    thumbJobs.push(fn);
+    runNextThumbJob();
+  }
+  let queueRefreshPending = false;
+  function scheduleQueueRefresh() {
+    if (queueRefreshPending) return;
+    queueRefreshPending = true;
+    requestAnimationFrame(() => {
+      queueRefreshPending = false;
+      renderQueue();
+    });
+  }
+  const THUMB_FADE_MS = 300;
+  function beginThumbSwap(item, target) {
+    if (item._thumbSwapTo === target) return;
+    item._thumbSwapTo = target;
+    if ("out" !== item._thumbPhase) {
+      item._thumbPhase = "out";
+      item._thumbPhaseAt = performance.now();
+    }
+    const commit = () => {
+      if (item._thumbSwapTo !== target) return;
+      const left = Math.max(0, THUMB_FADE_MS - (performance.now() - item._thumbPhaseAt));
+      setTimeout(() => {
+        if (item._thumbSwapTo !== target) return;
+        item._thumbSwapTo = null;
+        item._thumbShownSrc = target;
+        renderQueue();
+      }, left);
+    };
+    const pre = new Image();
+    pre.addEventListener("load", commit, { once: true });
+    pre.addEventListener("error", commit, { once: true });
+    pre.src = target;
+    if (pre.complete) commit();
   }
   function buildThumbWrap(item) {
@@ -2148 +3259 @@
     const thumb = document.createElement("img");
     thumb.className = "thumb";
-    thumb.src = thumbSrcFor(item);
     thumb.alt = "";
+    const target = thumbSrcFor(item);
+    if (!item._thumbShownSrc) item._thumbShownSrc = target;
+    const swapping = target !== item._thumbShownSrc;
+    if (swapping) beginThumbSwap(item, target);
+    thumb.src = item._thumbShownSrc;
+    const loading = item.thumbBusy > 0 || swapping;
+    const now = performance.now();
+    if (loading) {
+      if ("out" !== item._thumbPhase) {
+        item._thumbPhase = "out";
+        item._thumbPhaseAt = now;
+      }
+    } else if ("out" === item._thumbPhase) {
+      item._thumbPhase = "in";
+      item._thumbPhaseAt = now;
+    }
+    const elapsed = now - item._thumbPhaseAt;
+    if ("in" === item._thumbPhase && elapsed >= THUMB_FADE_MS) item._thumbPhase = null;
+    if (item._thumbPhase) {
+      thumb.style.animation = "sqfy-thumb-" + item._thumbPhase + " " + THUMB_FADE_MS + "ms ease both";
+      thumb.style.animationDelay = -elapsed + "ms";
+    }
+    if (loading) thumbWrap.classList.add("is-loading");
     const doneBadge = document.createElement("span");
     doneBadge.className = "done-badge";
@@ -2169 +3302 @@
   }
   function renderQueue() {
+    applyLandingRule();
+    updateRailVisibility();
     updateResetAllBtn();
     updateFilePosition();
     queueList.innerHTML = "";
-    nextBtn.hidden = queue.length <= 1;
     {
+      const multi = queue.length > 1;
       const hasOtherPending = queue.some((i) => i.id !== currentId && i.status === "pending");
-      const canApplyAll = queue.length > 1 && hasOtherPending;
-      applyAllRow.hidden = !canApplyAll;
-      if (!canApplyAll) applyAllCheck.checked = false;
-      const finalizes = !hasOtherPending || applyAllMode();
-      nextBtnLabel.textContent = finalizes ? "Finalize" : "Next file";
-      nextBtnArrowIcon.hidden = finalizes;
-      nextBtnFinalizeIcon.hidden = !finalizes;
-      nextBtn.classList.toggle("primary", !finalizes);
-      nextBtn.classList.toggle("accent", finalizes);
-    }
+      nextBtn.hidden = !multi || !hasOtherPending;
+      processAllBtn.hidden = !multi;
+      processAllBtnLabel.textContent = hasOtherPending ? config.strings.processAllAction : config.strings.finalizeAction;
+      itemActionBtn.hidden = multi && !!config.hideItemActionInBatch;
+      itemActionBtn.classList.toggle("primary", !multi);
+      if (!multi) applyAllCheck.checked = false;
+    }
+    if (dropzone) dropzone.hidden = queue.length > 1 && gridAvailable();
+    renderViewSwitch();
     rootEl.classList.toggle("sqfy-has-queue", queue.length > 0);
     if (queue.length === 0) {
@@ -2229 +3363 @@
       remove.addEventListener("click", (e) => {
         e.stopPropagation();
-        removeItem(item.id);
+        removeItemWithExit(item.id, row);
       });
       row.appendChild(thumbWrap);
@@ -2253 +3387 @@
       statSavings.textContent = "";
     }
+    if ("grid" === viewMode) {
+      renderGrid();
+      if (batchPanel) batchPanel.sync();
+    }
     if (!autoProcessRunning) changeListeners.forEach((fn) => fn());
   }
-  function makeThumb(imgEl, cb) {
-    const MAX = 80;
+  function makeThumb(imgEl, alpha, cb) {
+    const MAX = 240;
     const scale = Math.min(1, MAX / Math.max(imgEl.naturalWidth, imgEl.naturalHeight));
     const w = Math.max(1, Math.round(imgEl.naturalWidth * scale));
@@ -2265 +3403 @@
     c.getContext("2d").drawImage(imgEl, 0, 0, w, h);
     try {
-      cb(c.toDataURL("image/jpeg", 0.6));
+      cb(alpha ? c.toDataURL("image/png") : c.toDataURL("image/jpeg", 0.6));
     } catch (e) {
       cb(imgEl.src);
+    }
+  }
+  let viewMode = "editor";
+  let viewModeChosen = false;
+  const BATCH_LANDING_MODE = "editor";
+  let batchPanel = null;
+  const batchCapable = () => !config.singleImage && !config.hideQueue && !config.lockQueue && 1 !== config.maxQueue;
+  const gridAvailable = () => queue.length > 0 && batchCapable();
+  function railVisible() {
+    return queue.length > 0 && "editor" === viewMode;
+  }
+  function updateRailVisibility() {
+    if (config.hideQueue) {
+      rootEl.classList.remove("sqfy-has-rail");
+      if (queuePanel) queuePanel.inert = false;
+      return;
+    }
+    const on = railVisible();
+    rootEl.classList.toggle("sqfy-has-rail", on);
+    if (queuePanel) {
+      queuePanel.inert = !on && !!(window.matchMedia && window.matchMedia("(min-width: 901px)").matches);
+    }
+  }
+  function applyViewMode() {
+    if (!gridAvailable()) viewMode = "editor";
+    const grid = "grid" === viewMode;
+    batchMode.hidden = !grid;
+    renderViewSwitch();
+    updateRailVisibility();
+    if (grid) {
+      emptyState.hidden = true;
+      editorContent.hidden = true;
+    } else if (!introRevealPending) {
+      const hasCurrent = null !== currentId && queue.some((i) => i.id === currentId);
+      emptyState.hidden = hasCurrent;
+      editorContent.hidden = !hasCurrent;
+    }
+  }
+  const ZOOM_NAME = "sqfy-mode-zoom";
+  let zoomItemId = null;
+  let zoomRun = 0;
+  function zoomEl() {
+    if (null === zoomItemId) return null;
+    if ("grid" === viewMode) {
+      const tile = batchGrid.querySelector(`.batch-tile[data-id="${zoomItemId}"] .thumb`);
+      return tile || null;
+    }
+    return currentId === zoomItemId ? imgOriginal : null;
+  }
+  function clearZoomNames() {
+    imgOriginal.style.viewTransitionName = "";
+    batchGrid.querySelectorAll(".thumb").forEach((el) => {
+      el.style.viewTransitionName = "";
+    });
+    zoomItemId = null;
+  }
+  function canAnimateModeSwitch() {
+    if ("function" !== typeof document.startViewTransition) return false;
+    return !(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  }
+  function setViewMode(mode, { chosen = false, zoomFrom = null } = {}) {
+    if (chosen) viewModeChosen = true;
+    holdEncode();
+    const apply = () => {
+      viewMode = mode;
+      applyViewMode();
+      renderQueue();
+    };
+    if (!canAnimateModeSwitch()) {
+      apply();
+      releaseEncode();
+      return;
+    }
+    zoomItemId = null !== zoomFrom ? zoomFrom : currentId;
+    const from = zoomEl();
+    if (from) from.style.viewTransitionName = ZOOM_NAME;
+    let transition;
+    try {
+      transition = document.startViewTransition(() => {
+        apply();
+        const to = zoomEl();
+        if (to) to.style.viewTransitionName = ZOOM_NAME;
+      });
+    } catch {
+      apply();
+      clearZoomNames();
+      releaseEncode();
+      return;
+    }
+    rootEl.classList.add("sqfy-mode-vt");
+    const run = ++zoomRun;
+    const settle = () => {
+      if (run !== zoomRun) return;
+      rootEl.classList.remove("sqfy-mode-vt");
+      clearZoomNames();
+      releaseEncode();
+    };
+    transition.finished.then(settle, settle);
+  }
+  function applyLandingRule() {
+    if (0 === queue.length) viewModeChosen = false;
+    if (!gridAvailable()) {
+      if ("grid" === viewMode) applyViewMode();
+      return;
+    }
+    if (viewModeChosen) return;
+    if (queue.length < 2) return;
+    if (BATCH_LANDING_MODE === viewMode) return;
+    viewMode = BATCH_LANDING_MODE;
+    applyViewMode();
+  }
+  function showEditorSurface() {
+    if ("grid" === viewMode) return;
+    emptyState.hidden = true;
+    editorContent.hidden = false;
+  }
+  function hasAlphaSource(item) {
+    return ALPHA_CAPABLE.test(item.name) || !!(item.file && ALPHA_MIME.has(item.file.type));
+  }
+  function renderGrid() {
+    batchGrid.innerHTML = "";
+    queue.forEach((item, index) => {
+      const tile = document.createElement("div");
+      tile.className = "batch-tile" + (item.encodeError ? " is-failed" : "");
+      tile.setAttribute("role", "button");
+      tile.tabIndex = 0;
+      tile.dataset.id = item.id;
+      tile.setAttribute("aria-label", "Edit " + displayName(item));
+      const thumbWrap = buildThumbWrap(item);
+      if (hasAlphaSource(item)) thumbWrap.classList.add("has-alpha");
+      tile.appendChild(thumbWrap);
+      const name = document.createElement("span");
+      name.className = "batch-tile-name";
+      name.textContent = displayName(item);
+      tile.appendChild(name);
+      if (item.encodeError) {
+        const failed = document.createElement("span");
+        failed.className = "batch-tile-failed";
+        failed.title = item.encodeError;
+        failed.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M12 8v5"/><path d="M12 16.5v.01"/></svg>';
+        tile.appendChild(failed);
+      }
+      const remove = document.createElement("button");
+      remove.type = "button";
+      remove.className = "batch-tile-remove";
+      remove.title = "Remove from the batch";
+      remove.setAttribute("aria-label", "Remove " + displayName(item));
+      remove.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>';
+      remove.addEventListener("click", (e) => {
+        e.stopPropagation();
+        removeItemWithExit(item.id, tile);
+      });
+      tile.appendChild(remove);
+      const openHint = document.createElement("span");
+      openHint.className = "batch-tile-open";
+      openHint.setAttribute("aria-hidden", "true");
+      openHint.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>Edit';
+      thumbWrap.appendChild(openHint);
+      const open = () => {
+        tile.classList.add("is-opening");
+        selectItem(item.id);
+        setViewMode("editor", { chosen: true, zoomFrom: item.id });
+      };
+      tile.addEventListener("click", open);
+      tile.addEventListener("keydown", (e) => {
+        if ("Enter" !== e.key && " " !== e.key) return;
+        e.preventDefault();
+        open();
+      });
+      tileDecorators.forEach((fn) => fn(tile, item, index));
+      batchGrid.appendChild(tile);
+    });
+    const add = document.createElement("button");
+    add.type = "button";
+    add.className = "batch-tile batch-tile-add";
+    add.setAttribute("aria-label", "Add images");
+    add.innerHTML = '<span class="batch-tile-add-icon" aria-hidden="true"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></span><span class="batch-tile-name">Add images</span>';
+    add.addEventListener("click", () => fileInput.click());
+    batchGrid.appendChild(add);
+    batchCount.textContent = queue.length;
+    batchCountLabel.textContent = 1 === queue.length ? "image" : "images";
+    batchProcessAllLabel.textContent = queue.some((i) => "pending" === i.status) ? config.strings.processAllAction : config.strings.finalizeAction;
+  }
+  function noteToolUsed(tool) {
+    if ("function" !== typeof config.onToolUsed) return;
+    try {
+      config.onToolUsed(tool);
+    } catch {
     }
   }
@@ -2357 +3683 @@
         // items keep the carry-from-item-to-item convenience); wins over committed*
         status: "pending",
+        // Set when a batch run could not encode this image, cleared the moment
+        // one can. The grid's only per-tile state, because on a batch the
+        // exceptions are the thing you need to find — see renderGrid.
+        encodeError: null,
         metricsReported: false,
         // has this item's bytes already gone into a reportBatchMetrics() call?
@@ -2394 +3724 @@
           );
         }
-        makeThumb(imgEl, (dataUrl) => {
+        makeThumb(imgEl, hasAlphaSource(item), (dataUrl) => {
           item.thumbSrc = dataUrl;
           renderQueue();
@@ -2476 +3806 @@
     updateFormatNote();
   }
+  const REMOVE_EXIT_MS = 190;
+  function removeItemWithExit(id, el) {
+    if (!el || el.classList.contains("is-removing")) return;
+    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      removeItem(id);
+      return;
+    }
+    el.classList.add("is-removing");
+    setTimeout(() => removeItem(id), REMOVE_EXIT_MS);
+  }
   function removeItem(id) {
     const idx = queue.findIndex((i) => i.id === id);
@@ -2504 +3844 @@
     currentId = null;
     resetSettingsToDefaults();
+    if (batchPanel) batchPanel.resetAll();
     showEmptyEditor();
     renderQueue();
@@ -2509 +3850 @@
   }
   function showEmptyEditor() {
-    emptyState.hidden = false;
-    editorContent.hidden = true;
+    if ("grid" !== viewMode) {
+      emptyState.hidden = false;
+      editorContent.hidden = true;
+    }
     imgOriginal.removeAttribute("src");
     imgPreview.removeAttribute("src");
@@ -2521 +3864 @@
     if (!finalizeModalBackdrop.hidden) closeFinalizeModal();
     currentId = id;
-    if (!introRevealPending) {
-      emptyState.hidden = true;
-      editorContent.hidden = false;
-    }
+    if (!introRevealPending) showEditorSurface();
     fnameEl.textContent = item.name;
     updateFnameTip();
@@ -2691 +4031 @@
     const options = buildOptions(format, quality, effort);
     const pixels = applyPixelTransforms(item, cloneImageData(cachedImageData));
-    const buffer = await codecEncode(format, pixels, options);
-    return new Blob([buffer], { type: MIME[format] });
+    try {
+      const buffer = await codecEncode(format, pixels, options);
+      return new Blob([buffer], { type: MIME[format] });
+    } catch (err) {
+      if (forceSingleThread || !isOutOfMemoryError(err)) throw err;
+      enterSingleThreadMode();
+      const retryPixels = applyPixelTransforms(item, cloneImageData(cachedImageData));
+      const buffer = await codecEncode(format, retryPixels, options);
+      return new Blob([buffer], { type: MIME[format] });
+    }
+  }
+  let encodeHeld = false;
+  function holdEncode() {
+    encodeHeld = true;
+    clearTimeout(debounceTimer);
+  }
+  function releaseEncode() {
+    if (!encodeHeld) return;
+    encodeHeld = false;
+    scheduleEncode();
   }
   function scheduleEncode() {
+    if (encodeHeld) return;
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(runEncode, 220);
@@ -2715 +4074 @@
       item.previewURL = URL.createObjectURL(blob);
       item.encodedSignature = signature;
+      if (item.encodeError) {
+        item.encodeError = null;
+        scheduleQueueRefresh();
+      }
       changeListeners.forEach((fn) => fn());
       imgPreview.hidden = false;
@@ -2721 +4084 @@
       const pct = Math.round((1 - blob.size / item.size) * 100);
       outPctEl.textContent = pct >= 0 ? "-" + pct + "%" : "+" + Math.abs(pct) + "%";
-      codecStatusEl.textContent = FORMAT_LABELS[settings.format] + " ready.";
+      codecStatusEl.textContent = "";
       encodedListeners.forEach((fn) => fn(item));
       if (!isEncodedUpToDate(item)) scheduleEncode();
@@ -2729 +4092 @@
       outPctEl.textContent = "";
       codecStatusEl.textContent = "";
+      item.encodeError = "Encode failed: " + e.message;
+      scheduleQueueRefresh();
       showCenterToast("Encode failed: " + e.message, "error");
       console.error(e);
@@ -2755 +4120 @@
     const stageRect = stage.getBoundingClientRect();
     const imgRect = imgOriginal.getBoundingClientRect();
+    const innerRect = stageInner.getBoundingClientRect();
     if (stageRect.width === 0 || imgRect.width === 0) return;
     const xInStage = v / 100 * stageRect.width;
@@ -2760 +4126 @@
     const boundaryPct = Math.max(0, Math.min(100, xInImage / imgRect.width * 100));
     imgPreview.style.clipPath = `inset(0 0 0 ${boundaryPct}%)`;
-    dividerLine.style.left = xInImage + "px";
-    loupeGrip.style.left = xInImage + "px";
+    const xInInner = imgRect.left - innerRect.left + xInImage;
+    dividerLine.style.left = xInInner + "px";
+    loupeGrip.style.left = xInInner + "px";
   }
   function commitCurrent() {
@@ -2907 +4274 @@
     const active = !!resize;
     resizeEntry.classList.toggle("active", active);
-    resizeEntryLabel.textContent = active ? resizeLabelFor(resize) : "Resize";
+    resizeEntryBtn.title = active ? "Resize — " + resizeLabelFor(resize) : "Resize";
     resizeEntryPencil.hidden = !active;
     resizeEntryClearBtn.hidden = !active;
@@ -2924 +4291 @@
     const item = queue.find((i) => i.id === currentId);
     if (!item) return;
+    noteToolUsed("resize");
     resizeModalItemId = item.id;
     const resize = item.resize;
@@ -2933 +4301 @@
     const work = workingDims(item);
     resizeCurrentSize.textContent = work.w && work.h ? `${work.w} × ${work.h} px` : "—";
-    resizeApplyAllCheck.checked = false;
+    const multi = queue.length > 1;
+    resizeApplyAllRow.hidden = !multi;
+    resizeApplyAllCheck.checked = multi;
     updateResizeUnitVisibility();
     paintSlider(resizePctSlider);
@@ -3157 +4527 @@
     }
   });
-  nextBtn.addEventListener("click", async () => {
-    if (applyAllMode()) {
+  function toGrid() {
+    noteToolUsed("grid");
+    setViewMode("grid", { chosen: true });
+  }
+  function toPreview() {
+    setViewMode("editor", { chosen: true });
+  }
+  viewSwitchGrid.addEventListener("click", () => {
+    if ("grid" === viewMode) return;
+    toGrid();
+  });
+  viewSwitchPreview.addEventListener("click", () => {
+    if ("editor" === viewMode) return;
+    if (null === currentId || !queue.some((i) => i.id === currentId)) {
+      if (!queue.length) return;
+      selectItem(queue[0].id);
+    }
+    toPreview();
+  });
+  function renderViewSwitch() {
+    if (!viewSwitchHost) return;
+    viewSwitch.hidden = !gridAvailable();
+    const grid = "grid" === viewMode;
+    viewSwitchGrid.classList.toggle("active", grid);
+    viewSwitchPreview.classList.toggle("active", !grid);
+    viewSwitchGrid.setAttribute("aria-pressed", String(grid));
+    viewSwitchPreview.setAttribute("aria-pressed", String(!grid));
+  }
+  const TEXT_ENTRY_TYPES = /* @__PURE__ */ new Set([
+    "text",
+    "search",
+    "url",
+    "tel",
+    "email",
+    "password",
+    "number",
+    "date",
+    "datetime-local",
+    "month",
+    "week",
+    "time",
+    "color"
+  ]);
+  document.addEventListener("keydown", (e) => {
+    if ("Escape" !== e.key || e.defaultPrevented) return;
+    if ("editor" !== viewMode || !gridAvailable()) return;
+    const el = document.activeElement;
+    if (el) {
+      const tag = el.tagName;
+      const typing = el.isContentEditable || "TEXTAREA" === tag || "SELECT" === tag || "INPUT" === tag && TEXT_ENTRY_TYPES.has((el.type || "text").toLowerCase());
+      if (typing) return;
+    }
+    if (rootEl.querySelector(".modal-backdrop:not([hidden])")) return;
+    if (rootEl.classList.contains("sqfy-crop-mode")) return;
+    if (document.querySelector(".sqfy-tone-panel")) return;
+    if (document.querySelector(".sqfy-presets-dropdown:not([hidden])")) return;
+    if (document.querySelector(".sqfy-site-menu.show")) return;
+    e.preventDefault();
+    toGrid();
+  });
+  batchClearBtn.addEventListener("click", () => clearQueue());
+  batchResetBtn.addEventListener("click", () => {
+    if (!batchPanel) return;
+    batchPanel.resetAll();
+    showToast("All edits cleared.");
+  });
+  batchProcessAllBtn.addEventListener("click", async () => {
+    if (queue.length === 0) return;
+    if (queue.some((i) => "pending" === i.status)) {
+      applyAllCheck.checked = true;
+      try {
+        await commitAll();
+        openFinalizeModal();
+      } finally {
+        applyAllCheck.checked = false;
+      }
+      return;
+    }
+    await recommitStale();
+    openFinalizeModal();
+  });
+  processAllBtn.addEventListener("click", async () => {
+    const hasOtherPending = queue.some((i) => i.id !== currentId && i.status === "pending");
+    if (!hasOtherPending) {
+      const item = commitCurrent();
+      if (!item) {
+        showToast("Still encoding — one second.");
+        return;
+      }
+      await recommitStale();
+      openFinalizeModal();
+      return;
+    }
+    applyAllCheck.checked = true;
+    try {
       await commitAll();
       openFinalizeModal();
-      return;
-    }
+    } finally {
+      applyAllCheck.checked = false;
+    }
+  });
+  nextBtn.addEventListener("click", async () => {
     const item = commitCurrent();
     if (!item) {
@@ -3176 +4642 @@
     }
   });
-  applyAllCheck.addEventListener("change", renderQueue);
   function openApplyProgress(total) {
     applyProgressFill.style.width = "0%";
@@ -3192 +4657 @@
     if (queue.length === 0) return;
     nextBtn.disabled = true;
-    applyAllCheck.disabled = true;
+    processAllBtn.disabled = true;
     batchRunning = true;
     const total = queue.length;
     let done = 0;
+    const failed = [];
     openApplyProgress(total);
     try {
@@ -3225 +4691 @@
           item.committedPixelSig = itemPixelSignature(item);
           item.status = "done";
+          item.encodeError = null;
         } catch (e) {
-          showToast(`Skipped ${item.name} — couldn't encode as ${FORMAT_LABELS[settings.format]}.`);
+          item.encodeError = `Couldn't encode as ${FORMAT_LABELS[settings.format]}.`;
+          failed.push(item.name);
         }
         done++;
@@ -3232 +4700 @@
       }
       renderQueue();
-      showCenterToast(`Applied ${FORMAT_LABELS[settings.format]} to all files.`);
+      if (failed.length) {
+        showCenterToast(
+          `${failed.length} of ${total} couldn't be encoded as ${FORMAT_LABELS[settings.format]} — they're marked in the grid.`,
+          "error"
+        );
+      } else {
+        showCenterToast(`Applied ${FORMAT_LABELS[settings.format]} to all files.`);
+      }
     } finally {
       batchRunning = false;
       nextBtn.disabled = false;
-      applyAllCheck.disabled = false;
+      processAllBtn.disabled = false;
       setTimeout(closeApplyProgress, 500);
     }
@@ -3245 +4720 @@
     const total = stale.length;
     let done = 0;
+    const failedStale = [];
     openApplyProgress(total);
     try {
@@ -3261 +4737 @@
           item.committedSize = blob.size;
           item.committedPixelSig = itemPixelSignature(item);
+          item.encodeError = null;
         } catch (e) {
-          showToast(`Couldn't re-encode ${item.name} — it kept its previous version.`);
+          item.encodeError = "Couldn't re-encode — kept its previous version.";
+          failedStale.push(item.name);
         }
         done++;
@@ -3268 +4746 @@
       }
       renderQueue();
+      if (failedStale.length) {
+        showCenterToast(
+          `${failedStale.length} of ${total} couldn't be re-encoded — they're marked in the grid and keep their previous version.`,
+          "error"
+        );
+      }
     } finally {
       setTimeout(closeApplyProgress, 500);
@@ -3316 +4800 @@
     pending.forEach((p) => p.reject(torndown));
     pending.clear();
-    featureDisposers.forEach((fn) => fn());
+    featureDisposers.forEach((fn) => {
+      try {
+        fn();
+      } catch (err) {
+        console.error("Squishify: a feature disposer threw during teardown", err);
+      }
+    });
     queue.forEach((item) => {
       URL.revokeObjectURL(item.url);
@@ -3345 +4835 @@
   renderQueue();
   startEmptyTipRotation();
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => rootEl.classList.remove("sqfy-booting"));
+  });
+  const batchTabProviders = [];
   const featureApi = {
     root: rootEl,
@@ -3370 +4864 @@
     defaultSettings: () => defaultSettings(),
     el: $,
+    // Report that this feature's tool was opened (see noteToolUsed above).
+    // Feature modules call this rather than reaching for config themselves so
+    // the "WordPress cannot call out" guarantee has exactly one enforcement
+    // point instead of one per feature.
+    noteToolUsed: (tool) => noteToolUsed(tool),
     getCurrentItem: () => queue.find((i) => i.id === currentId) || null,
     eachItem: (fn) => queue.forEach(fn),
+    // EVERY per-item edit on EVERY item, put back. The grid's card resets are
+    // card-scoped by construction — Format resets settings, Size clears
+    // resize, and so on — which means any feature without a card is
+    // unreachable from this mode. Upscale was the first to fall in that hole
+    // (a preset can auto-apply it across the queue, and nothing in the grid
+    // could take it off again), and registerReset is a general extension
+    // point, so the next feature to use one would have landed there too.
+    // This runs the providers instead of naming the features, so it cannot go
+    // stale. Same body as the editor's own heading Reset, per item.
+    // Deliberately per-ITEM only. The global dials are the Format card's
+    // business and the panel resets that separately — this is the half no
+    // card owns.
+    resetAllItems: () => {
+      queue.forEach((item) => {
+        item.resize = null;
+        resetProviders.forEach((p) => {
+          if (p.has(item)) p.clear(item);
+        });
+      });
+      renderQueue();
+    },
     // Count only, without handing out the array. Used to decide whether
     // navigating away would cost the user work — note the queue can be
@@ -3378 +4898 @@
     // is not a substitute for asking this.
     queueLength: () => queue.length,
+    // Run an async job over a set of items, one at a time, behind the same
+    // progress modal commitAll uses. Exported because a Pro feature can now
+    // start real per-image work from the batch panel (Upscale is the first),
+    // and twenty full-size resamples fired in one frame is the freeze that
+    // queueThumbJob was introduced to stop — except this one has no
+    // thumbnail spinner standing in for it, so it needs the modal.
+    // Failures are swallowed per item, deliberately: one image that cannot
+    // be processed must not abandon the other nineteen.
+    runBatchJob: async (items, fn) => {
+      if (!items.length) return;
+      let done = 0;
+      openApplyProgress(items.length);
+      try {
+        for (const item of items) {
+          try {
+            await fn(item);
+          } catch (e) {
+            console.error("Squishify batch job failed for", item.name, e);
+          }
+          done++;
+          updateApplyProgress(done, items.length);
+        }
+      } finally {
+        setTimeout(closeApplyProgress, 500);
+      }
+    },
     // Re-running selection on the current item is the sanctioned "refresh
     // everything" path — it replays the full pipeline (providers, listeners,
@@ -3390 +4936 @@
     requestEncode: scheduleEncode,
     refreshQueue: renderQueue,
+    // Coalesced sibling of refreshQueue, for async completions arriving in a
+    // burst. Use it from anything that lands off a decode or an encode.
+    scheduleQueueRefresh,
+    // Runs `fn(done)` with at most one thumbnail job in flight across the
+    // whole app, yielding a frame between them. Raise item.thumbBusy BEFORE
+    // queueing so the spinner appears at the moment of the edit rather than
+    // when the work reaches the front. See the thumbnail work queue above.
+    queueThumbJob,
     refreshControls: () => updateEffortControl(),
     addFiles,
@@ -3424 +4978 @@
     getBaseURL: (item) => baseURLFor(item),
     getOriginalURL: (item) => originalURLFor(item),
+    // Apply one max-width to the WHOLE queue — the Resize modal's
+    // apply-to-all, reachable without a modal or a current image. Same
+    // semantics deliberately: `null` clears, and every item takes the same
+    // { value, unit } so the batch stays one decision.
+    applyResizeToAll: (resize) => {
+      queue.forEach((item) => {
+        item.resize = resize ? { ...resize } : null;
+      });
+      updateResizeEntryButton();
+      renderQueue();
+      scheduleEncode();
+    },
+    // Mount a piece of chrome — an upgrade badge, a trial countdown, the site
+    // menu — wherever THIS host keeps its chrome. The header slot when there
+    // is a header, the empty-state corner when there is not (#52, spec §2.4).
+    //
+    // Core owns the choice rather than each feature module making it, because
+    // the WordPress free plugin mounts the same upsell badge (src/wp/main.js)
+    // on a surface whose header is the overlay's own and therefore has no
+    // core header slot. One branch here beats the same branch in three
+    // modules, and no module has to know which host it is running on.
+    //
+    // `position` preserves the ordering the corner had: badges to the start,
+    // the menu to the end, so the menu stays rightmost whichever order the
+    // two happen to mount in.
+    mountChrome: (el, position = "start") => {
+      const host = $("appHeaderSlot") || $("emptyStateCorner");
+      if (!host) return;
+      if ("end" === position) host.appendChild(el);
+      else host.prepend(el);
+    },
+    // Contribute a tab to batch mode's settings panel. `{ id, label, mount }`
+    // for a real one, `{ id, label, locked: true, onClick }` for the free
+    // tier's upsell — a locked tab does not switch, because there is nothing
+    // behind it to show.
+    registerBatchTab: (tab) => batchTabProviders.push(tab),
     registerItemBadge: (fn) => itemBadgeProviders.push(fn),
-    registerItemThumb: (fn) => itemThumbProviders.push(fn),
+    // stage 'source' (default) answers "which pixels is this a thumbnail of"
+    // — crop. stage 'transform' is handed that answer and returns a restyled
+    // version of it — tone. See thumbSrcFor.
+    registerItemThumb: (fn, { stage: stage2 = "source" } = {}) => itemThumbProviders.push({ fn, stage: stage2 }),
     // A fresh copy of the queue row's thumbnail (badges included) for any
     // feature that needs to show an item OUTSIDE the rail — rename's manual
@@ -3432 +5025 @@
     getThumbWrap: (item) => buildThumbWrap(item),
     registerRowDecorator: (fn) => rowDecorators.push(fn),
+    // The grid's counterpart. Separate from registerRowDecorator rather than
+    // one hook over both, because a rail row and a batch tile are different
+    // shapes: a decorator that inserts a grip at the start of a horizontal
+    // row is wrong on a square tile, and pretending otherwise would push the
+    // difference into every feature that registers.
+    registerTileDecorator: (fn) => tileDecorators.push(fn),
     registerReset: (p) => resetProviders.push(p),
     moveItem: (id, toIndex) => moveItem(id, toIndex),
@@ -3447 +5046 @@
     // (msg, 'success' | 'error' | 'info') — the prominent centered
     // variant; falls back to the pill when a modal is already up.
-    centerToast: showCenterToast
+    centerToast: showCenterToast,
+    // Whether this session can ever hold more than one image — host shape
+    // only, not the current queue count. A feature offering "apply to all"
+    // has nothing to offer when this is false.
+    batchCapable: () => batchCapable()
   };
   (config.pro && config.pro.features || []).forEach((feature) => {
@@ -3457 +5060 @@
     if (typeof dispose === "function") featureDisposers.push(dispose);
   }
+  batchPanel = createBatchPanel(featureApi, {
+    cardsEl: $("batchCards"),
+    toolsEl: $("batchTools"),
+    extraTabs: batchTabProviders
+  });
   const warmupTimer = setTimeout(() => {
     if (destroyed || loadedCodecs.has(settings.format) || pending.size > 0 || queue.length > 0) return;
@@ -3462 +5070 @@
       const fmt = settings.format;
       codecEncode(fmt, new ImageData(1, 1), buildOptions(fmt, settings.quality, effortFor(fmt)), true).then(() => {
-        if (codecStatusEl.textContent.startsWith("Loading")) {
-          codecStatusEl.textContent = `${FORMAT_LABELS[fmt]} codec ready.`;
-        }
+        if (codecStatusEl.textContent.startsWith("Loading")) codecStatusEl.textContent = "";
       }).catch(() => {
       });
@@ -3568 +5174 @@
     const worker = new Worker(new URL(
       /* @vite-ignore */
-      "" + new URL("assets/encode.worker-CNcBUqEy.js", import.meta.url).href,
+      "" + new URL("assets/encode.worker-BqxZ11_8.js", import.meta.url).href,
       import.meta.url
     ), { type: "module" });
@@ -3589 +5195 @@
       <img src="${logoLockupUrl}" alt="Squishify">
     </span>
+    <div class="sqfy-overlay-center sqfy-app"></div>
     <button type="button" class="sqfy-return-btn">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
@@ -3616 +5223 @@
     hideQueue: !!opts.hideQueue,
     logoUrl: logoLockupUrl,
+    // This host builds its own header (above), so core renders none and has
+    // nowhere to put header-level controls unless it is handed the place.
+    headerSlot: header.querySelector(".sqfy-overlay-center"),
     // The overlay header above the app already carries the logo — no need to
     // repeat it in the single-image file heading.
@@ -3634 +5244 @@
       // optimize-first phrasing is kept — it's the plugin's differentiator
       // (docs/features/active/pro-discovery-spec.md).
-      privacyNote: "<strong>Free forever.</strong> Optimize first, upload second — images are processed locally in your browser and only reach your site when you click Upload.",
+      privacyNote: '<strong>Free forever.</strong> <span class="privacy-rest">Optimize first, upload second — images are processed locally in your browser and only reach your site when you click Upload.</span>',
       step3Title: "Upload &amp; go!",
       step3Desc: "Send your optimized images straight to the Media Library.",
@@ -3764 +5374 @@
 const X_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>';
 const BACK_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>';
-const PLAY_ICON = '<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke-linejoin="round"/></svg>';
+const PLAY_ICON$1 = '<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke-linejoin="round"/></svg>';
 const LOCKED_ENTRIES = [
-  { key: "boost", label: "Boost" },
+  { key: "boost", label: "Upscale" },
   { key: "presets", label: "Presets" },
-  { key: "tone", label: "Tone" }
+  { key: "tone", label: "Color" }
 ];
 const FEATURE_LIST = [
-  { key: "boost", title: "Image Boost — get an undersized source up to the size you need" },
-  { key: "presets", title: "Presets" },
-  { key: "tone", title: "Tone — one look across the whole batch" },
-  { key: "quickprocess", title: "Quick Process — confirm a recipe once, then just drop and go" },
+  { key: "boost", title: "Upscale", sub: "Enlarge undersized images" },
+  { key: "presets", title: "Presets", sub: "Popular recipes" },
+  { key: "tone", title: "Color", sub: "Colorize and adjust" },
+  { key: "quickprocess", title: "Quick Process", sub: "Skip the UI, batch process" },
   { key: "reorder", title: "Drag-and-drop queue reordering (sets rename numbering)" },
   { key: "session", title: "Session autosave &amp; recovery" }
@@ -3845 +5455 @@
         return entry;
       });
+      if (api.registerBatchTab) {
+        api.registerBatchTab({
+          id: "boost",
+          label: "Upscale",
+          pro: true,
+          locked: true,
+          order: "start",
+          onClick: () => openModal(hasDemo("boost") ? "boost" : "overview")
+        });
+        api.registerBatchTab({
+          id: "presets",
+          label: "Presets",
+          pro: true,
+          locked: true,
+          order: "start",
+          onClick: () => openModal(hasDemo("presets") ? "presets" : "overview")
+        });
+        api.registerBatchTab({
+          id: "color",
+          label: "Color",
+          pro: true,
+          locked: true,
+          onClick: () => openModal(hasDemo("tone") ? "tone" : "overview")
+        });
+      }
       const backdrop = document.createElement("div");
       backdrop.className = "modal-backdrop sqfy-upsell-backdrop";
@@ -3858 +5493 @@
           <div class="sqfy-upsell-view" data-view="overview">
             <p class="sqfy-upsell-desc">
-              Squishify is free forever — batch, resize, convert, and optimize
-              as much as you like. Pro adds more ways to prep your assets, not
-              more capacity.
+              Squishify is free forever — batch, crop, resize, rename, convert
+              and optimize as much as you like. Pro adds more ways to prep your
+              assets, not more capacity.
             </p>
 
             ${FEATURE_LIST.some((f) => hasDemo(f.key)) ? `<div class="sqfy-upsell-features">
               ${FEATURE_LIST.filter((f) => hasDemo(f.key)).map(
-        (f) => `<button class="sqfy-upsell-feature-card" type="button" data-demo="${f.key}"><b>${f.title}</b><span class="sqfy-upsell-feature-see">See it</span></button>`
+        (f) => `<button class="sqfy-upsell-feature-card" type="button" data-demo="${f.key}"><b>${f.title}</b>${f.sub ? `<span class="sqfy-upsell-feature-sub">${f.sub}</span>` : ""}<span class="sqfy-upsell-feature-see">See it</span></button>`
       ).join("")}
             </div>` : ""}
@@ -3886 +5521 @@
           <div class="sqfy-upsell-view" data-view="${key}" hidden>
             <div class="sqfy-upsell-media" data-media-for="${key}">
-              <div class="sqfy-upsell-media-placeholder">${PLAY_ICON}</div>
+              <div class="sqfy-upsell-media-placeholder">${PLAY_ICON$1}</div>
             </div>
             <h4 class="sqfy-upsell-demo-title">${d.title}</h4>
@@ -4009 +5644 @@
       emptyBadge.type = "button";
       emptyBadge.textContent = "Squishify Pro";
-      api.el("emptyStateCorner").prepend(emptyBadge);
+      api.mountChrome(emptyBadge, "start");
       emptyBadge.addEventListener("click", () => openModal("overview"));
       const promo = document.createElement("div");
       promo.className = "sqfy-upsell-promo";
-      promo.innerHTML = `Do more with <b>Squishify Pro</b> — presets, Tone,
+      promo.innerHTML = `Do more with <b>Squishify Pro</b> — presets, Color,
         Quick Process, and queue reordering for common assets.
         <button class="sqfy-upsell-promo-link" type="button">Learn more</button>`;
@@ -4029 +5664 @@
         label.remove();
         entries.forEach((el) => el.remove());
-        emptyWrap.remove();
+        emptyBadge.remove();
         promo.remove();
         backdrop.remove();
@@ -4037 +5672 @@
 }
 const CHECK_ICON = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+const PLAY_ICON = '<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M10 8.5v7l6-3.5-6-3.5Z" fill="currentColor" stroke="none"/></svg>';
 const STORAGE_KEY = "sqfy.whatsNewSeen";
 function parseVersion(v) {
@@ -4068 +5704 @@
   ).join("");
 }
-function makeWhatsNewFeature({ currentVersion, entries = [], pro = false, returningVisitor = false }) {
+function openChangelogModal({ entries = [], pro = false, root = document }) {
+  const groups = entries.map((e) => ({ version: e.version, items: normalizeItems(e.items, pro) })).filter((e) => e.items.length > 0).reverse();
+  if (groups.length === 0) return null;
+  const backdrop = document.createElement("div");
+  backdrop.className = "modal-backdrop sqfy-whatsnew-backdrop sqfy-changelog-backdrop";
+  backdrop.innerHTML = `
+    <div class="modal sqfy-whatsnew-modal sqfy-changelog-modal" role="dialog" aria-modal="true" aria-labelledby="sqfyChangelogTitle">
+      <h3 id="sqfyChangelogTitle">Changelog</h3>
+      <div class="sqfy-changelog-scroll">${groupsHTML(groups)}</div>
+      <button class="btn sqfy-whatsnew-close sqfy-changelog-close" type="button">Close</button>
+    </div>`;
+  root.appendChild(backdrop);
+  const previouslyFocused = document.activeElement;
+  const closeBtn = backdrop.querySelector(".sqfy-changelog-close");
+  closeBtn.focus();
+  function close() {
+    document.removeEventListener("keydown", onKeydown, true);
+    backdrop.remove();
+    if (previouslyFocused && previouslyFocused.focus) previouslyFocused.focus();
+  }
+  function onKeydown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      close();
+    }
+  }
+  document.addEventListener("keydown", onKeydown, true);
+  closeBtn.addEventListener("click", close);
+  backdrop.addEventListener("click", (e) => {
+    if (e.target === backdrop) close();
+  });
+  return close;
+}
+function buildMedia(host, name, mediaBase, label) {
+  const src = mediaBase + name + (name.includes(".") ? "" : ".mp4");
+  const isImage = /\.(avif|webp|png|jpe?g|gif)$/i.test(name);
+  let el;
+  if (isImage) {
+    el = document.createElement("img");
+    el.src = src;
+    el.alt = "";
+    el.decoding = "async";
+    el.setAttribute("aria-hidden", "true");
+  } else {
+    el = document.createElement("video");
+    el.muted = true;
+    el.loop = true;
+    el.autoplay = true;
+    el.playsInline = true;
+    el.src = src;
+    el.setAttribute("aria-label", label);
+  }
+  el.className = "sqfy-whatsnew-media-asset";
+  el.addEventListener("error", () => host.remove());
+  host.appendChild(el);
+}
+function highlightsHTML(highlights, mediaBase) {
+  return highlights.map(
+    (h, i) => `
+      <li>
+        <span class="sqfy-whatsnew-check">${CHECK_ICON}</span>
+        <div class="sqfy-whatsnew-body">
+          <span>${h.text}${h.pro ? ' <span class="sqfy-whatsnew-tag">Pro</span>' : ""}</span>
+          ${h.media && mediaBase ? `<div class="sqfy-whatsnew-media" data-media-for="${i}">
+                   <div class="sqfy-whatsnew-media-placeholder">${PLAY_ICON}</div>
+                 </div>` : ""}
+        </div>
+      </li>`
+  ).join("");
+}
+function displayLines(entry, pro) {
+  const highlights = entry.highlights && entry.highlights.length ? entry.highlights : entry.items;
+  return normalizeItems(highlights || [], pro);
+}
+function makeWhatsNewFeature({
+  currentVersion,
+  entries = [],
+  pro = false,
+  returningVisitor = false,
+  mediaBase = ""
+}) {
   return {
     init(api) {
@@ -4079 +5796 @@
         lastSeen = "0";
       }
-      const groups = entries.filter(
+      const entry = entries.filter(
         (e) => e.bump !== "Patch" && isNewer(e.version, lastSeen) && !isNewer(e.version, currentVersion)
-      ).map((e) => ({ version: e.version, items: normalizeItems(e.items, pro) })).filter((e) => e.items.length > 0);
-      if (groups.length === 0) {
+      ).reduce((best, e) => !best || isNewer(e.version, best.version) ? e : best, null);
+      const lines = entry ? displayLines(entry, pro) : [];
+      if (lines.length === 0) {
         localStorage.setItem(STORAGE_KEY, currentVersion);
         return;
@@ -4091 +5809 @@
         <div class="modal sqfy-whatsnew-modal" role="dialog" aria-modal="true" aria-labelledby="sqfyWhatsNewTitle">
           <h3 id="sqfyWhatsNewTitle">What's new</h3>
-          ${groupsHTML(groups)}
+          <div class="sqfy-whatsnew-version">v${entry.version}</div>
+          <ul class="sqfy-whatsnew-items">${highlightsHTML(lines, mediaBase)}</ul>
+          <button class="sqfy-whatsnew-changelog" type="button">View full changelog</button>
           <button class="btn accent sqfy-whatsnew-close" type="button">Got it</button>
         </div>`;
       api.root.appendChild(backdrop);
+      lines.forEach((h, i) => {
+        if (!h.media || !mediaBase) return;
+        const host = backdrop.querySelector(`[data-media-for="${i}"]`);
+        if (host) buildMedia(host, h.media, mediaBase, h.text.replace(/<[^>]*>/g, ""));
+      });
       function close() {
         localStorage.setItem(STORAGE_KEY, currentVersion);
@@ -4109 +5834 @@
       document.addEventListener("keydown", onKeydown, true);
       backdrop.querySelector(".sqfy-whatsnew-close").addEventListener("click", close);
+      backdrop.querySelector(".sqfy-whatsnew-changelog").addEventListener("click", () => {
+        const root = api.root;
+        close();
+        openChangelogModal({ entries, pro, root });
+      });
       backdrop.addEventListener("click", (e) => {
         if (e.target === backdrop) close();
@@ -4270 +6000 @@
         text: "The Pro feature tour now shows Image Boost, which never had a place in it before."
       }
+    ],
+    highlights: [
+      {
+        rank: 2,
+        text: "Crop is now free, on every version — web and WordPress."
+      }
+    ]
+  },
+  {
+    version: "1.4.2",
+    bump: "Patch",
+    items: [
+      {
+        text: 'The controls bar now offers two named paths instead of one button and a checkbox: "Next file" to keep reviewing image by image, and "Process all" to apply your settings to the whole queue and go straight to the summary.'
+      },
+      {
+        text: `Resize opens with "Apply resize to all images" already ticked when there's more than one image queued — untick it for a one-off. On a single image the option is hidden entirely.`
+      },
+      {
+        text: "Rename opens on Sequence when you have a batch queued, and on This image when you don't. Whichever mode you pick yourself is remembered."
+      },
+      {
+        text: "On the web app, per-image Download is hidden while you're working on a batch — Process all collects everything into one zip instead."
+      }
+    ]
+  },
+  {
+    version: "1.5.0",
+    bump: "Minor",
+    items: [
+      {
+        text: "Bulk mode: drop two or more images and Squishify opens on a grid of everything you queued, with batch settings underneath. Click any image to edit it on its own, and the Grid button brings you back."
+      },
+      {
+        text: "Batch settings apply to the whole queue at once — format, quality and effort, a max width, a crop ratio, and a numbered rename sequence."
+      },
+      {
+        text: "Batch crop is a ratio: pick 1:1, 4:3 or 16:9 and every image gets the largest centred window at that ratio. The thumbnails show the result."
+      },
+      {
+        text: "Pro: Color adjustments join the batch settings, so one set of values covers the whole queue.",
+        pro: true,
+        upsell: true
+      },
+      {
+        text: "New app header and footer: the logo, the menu and the privacy promise now stay put for the whole session instead of living in the queue panel."
+      },
+      {
+        text: "The queue panel is now part of editing a single image, so the empty state and the grid both use the full width."
+      },
+      {
+        text: "Crops now show in the queue thumbnails instead of only on the stage, and thumbnails are sharper."
+      },
+      {
+        text: "Thumbnails of transparent PNGs, WebP and AVIF no longer flatten to black."
+      },
+      {
+        text: 'The drop area now shows a folder instead of a cloud-upload icon. Nothing about how Squishify works has changed — your images have always been processed on your own device and never uploaded anywhere — but the old icon was the one symbol everyone reads as "this goes to a server", and it was saying the opposite of the truth.'
+      },
+      {
+        text: `Fixed: on some browsers, AVIF and PNG encodes could fail in the WordPress admin with a "multithreaded codec excluded" error. The plugin now always uses the codec builds it actually ships with, so it can't happen on any browser.`,
+        pro: false,
+        upsell: false
+      },
+      {
+        text: "Fixed: on the free WordPress plugin, uploading a batch to the Media Library announced the upload but never closed Squishify, and WordPress went on warning about unsaved work that had already been uploaded. The overlay now tears down and takes you to the Media Library as it always should have."
+      }
+    ],
+    highlights: [
+      {
+        rank: 1,
+        text: "New: Grid — drop a batch and see every image at once, with one set of settings underneath that covers all of them."
+      }
     ]
   }

squishify/trunk/readme.txt

@@ -3 +3 @@
 Tags: image optimization, resize images, crop image, avif, webp
 Requires at least: 6.5
-Tested up to: 7.0
+Tested up to: 7.1
 Requires PHP: 7.4
-Stable tag: 1.4.0
+Stable tag: 1.5.0
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
-Batch-resize, crop, rename and compress a whole set of images at once, right in your browser — then upload only the finished files to your Media Library.
+Batch-resize, crop, rename and compress images right in your browser — then upload only the finished files to your Media Library.
 
 == Description ==
@@ -79 +79 @@
 == Changelog ==
 
+= 1.5.0 =
+* Bulk mode: drop two or more images and Squishify opens on a grid of everything you queued, with batch settings underneath. Click any image to edit it on its own, and the Grid button brings you back.
+* Batch settings apply to the whole queue at once — format, quality and effort, a max width, a crop ratio, and a numbered rename sequence.
+* Batch crop is a ratio: pick 1:1, 4:3 or 16:9 and every image gets the largest centred window at that ratio. The thumbnails show the result.
+* Pro: Color adjustments join the batch settings, so one set of values covers the whole queue.
+* New app header and footer: the logo, the menu and the privacy promise now stay put for the whole session instead of living in the queue panel.
+* The queue panel is now part of editing a single image, so the empty state and the grid both use the full width.
+* Crops now show in the queue thumbnails instead of only on the stage, and thumbnails are sharper.
+* Thumbnails of transparent PNGs, WebP and AVIF no longer flatten to black.
+* The drop area now shows a folder instead of a cloud-upload icon. Nothing about how Squishify works has changed — your images have always been processed on your own device and never uploaded anywhere — but the old icon was the one symbol everyone reads as "this goes to a server", and it was saying the opposite of the truth.
+* Fixed: on some browsers, AVIF and PNG encodes could fail in the WordPress admin with a "multithreaded codec excluded" error. The plugin now always uses the codec builds it actually ships with, so it can't happen on any browser.
+* Fixed: on the free WordPress plugin, uploading a batch to the Media Library announced the upload but never closed Squishify, and WordPress went on warning about unsaved work that had already been uploaded. The overlay now tears down and takes you to the Media Library as it always should have.
+
+= 1.4.2 =
+* The controls bar now offers two named paths instead of one button and a checkbox: "Next file" to keep reviewing image by image, and "Process all" to apply your settings to the whole queue and go straight to the summary.
+* Resize opens with "Apply resize to all images" already ticked when there's more than one image queued — untick it for a one-off. On a single image the option is hidden entirely.
+* Rename opens on Sequence when you have a batch queued, and on This image when you don't. Whichever mode you pick yourself is remembered.
+* On the web app, per-image Download is hidden while you're working on a batch — Process all collects everything into one zip instead.
+
 = 1.4.0 =
 * Crop is now free, on every version — web and WordPress. Drag a frame or lock it to a ratio and type exact output dimensions, on one image or across the whole batch. It used to be part of Pro; it isn't any more, and nothing about it was cut down on the way.

squishify/trunk/squishify.php

@@ -4 +4 @@
  * Plugin URI:        https://squishify.app/wordpress
  * Description:       Optimize first, upload second. Batch-compress, convert, and resize images in your browser — the full-size originals never hit your server — then upload the finished files straight into the Media Library.
- * Version:           1.4.0
+ * Version:           1.5.0
  * Requires at least: 6.5
  * Requires PHP:      7.4
@@ -18 +18 @@
 }
 
-define( 'SQUISHIFY_VERSION', '1.4.0' );
+define( 'SQUISHIFY_VERSION', '1.5.0' );
 define( 'SQUISHIFY_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
 define( 'SQUISHIFY_PLUGIN_URL', plugin_dir_url( __FILE__ ) );