feat(post-form): dark-theme the photo widget + drag-to-reorder that sticks

Styling: repaint FilePond's default light drop zone/thumbnails/actions with
the Field Notes dark tokens so the picker matches the site palette.

Reordering: enable FilePond drag-reorder (allowReorder, itemInsertLocation
'after'). FilePond does NOT re-sequence its submitted data[photos][] inputs on
reorder, so post-form.js sends the visual order as a top-level `photo_order`
POST key on submit. cache-on-save reads it from $_POST (after add-page-by-form
copies the files, priority -100) and renames them photo-1..N in that order —
which the entry honours since it lists media by filename and treats the first
as hero. The order key is top-level (not data[...]), so it never lands in the
entry frontmatter. Best-effort + self-idempotent: locates the new entry folder
by the uploaded filenames and no-ops if they're already renamed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

themes/intotheeast/js/src/post-form.css

@@ -195,6 +195,33 @@
 /* Hide FilePond's "Powered by PQINA" credit. */
 .filepond--credits { display: none !important; }
 
+/* Field Notes dark theme for the FilePond widget — the default is a light/cream
+   panel that clashes with the site's warm near-black palette. Repaint the drop
+   zone, thumbnails and actions with the design tokens. */
+.filepond--root { font-family: var(--font-ui); font-size: var(--text-base); }
+.filepond--panel-root {
+    background-color: var(--color-canvas);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+}
+.filepond--drop-label,
+.filepond--drop-label label { color: var(--color-ink-muted); }
+.filepond--label-action {
+    color: var(--color-accent);
+    text-decoration-color: var(--color-accent);
+}
+.filepond--item-panel {
+    background-color: var(--color-surface-raised);
+    border-radius: var(--radius-md);
+}
+.filepond--drip-blob { background-color: var(--color-accent); }
+.filepond--file { color: var(--color-ink); }
+.filepond--file-action-button {
+    color: var(--color-ink);
+    background-color: rgba(0, 0, 0, 0.45);
+}
+.filepond--file-action-button:hover { background-color: rgba(0, 0, 0, 0.65); }
+
 /* Issue #2: FilePond's completed thumbnail carries a murky gradient tint + the
    filename overlay, which reads as "something's wrong". Strip those overlays
    and show a single clean green ✓ badge so a finished upload is unambiguous.

themes/intotheeast/js/src/post-form.js

@@ -137,6 +137,28 @@ function initPhotoConversion() {
 
     var converting = 0; // HEIC conversions in flight (before FilePond) — gates Submit
     var collapse = buildPhotoCollapse();
+    var orderPond = null; // set when the managed FilePond instance is found
+
+    // FilePond does NOT re-sequence its submitted data[photos][] inputs when the
+    // list is reordered — those stay in upload order — so the drag order never
+    // reaches the server on its own. Send it explicitly: on submit, write the
+    // current visual order into a hidden input. Its name is a TOP-LEVEL POST key
+    // ("photo_order", not "data[...]") so Grav's form never captures it into the
+    // page data — the server reads it straight from $_POST and renames the
+    // copied files photo-1..N to match, with nothing leaking into frontmatter.
+    form.addEventListener('submit', function () {
+        if (!orderPond) return;
+        var files = orderPond.getFiles();
+        if (!files.length) return; // text-only post — send nothing
+        var hidden = form.querySelector('input[name="photo_order"]');
+        if (!hidden) {
+            hidden = document.createElement('input');
+            hidden.type = 'hidden';
+            hidden.name = 'photo_order';
+            form.appendChild(hidden);
+        }
+        hidden.value = JSON.stringify(files.map(function (f) { return f.filename; }));
+    }, true);
 
     function setStatus(msg, kind) {
         var el = photoStatusEl();
@@ -244,7 +266,12 @@ function initPhotoConversion() {
         ponds.forEach(function (pond) {
             if (pond && !pond._heicHooked) {
                 pond._heicHooked = true;
-                pond.setOptions({ beforeAddFile: makeBeforeAddFile(pond) });
+                // allowReorder: drag thumbnails to set the order. The server
+                // (cache-on-save) renames the copied files photo-1..N in the
+                // submitted order so the published entry honours it (entry media
+                // is filename-ordered; hero = first).
+                pond.setOptions({ beforeAddFile: makeBeforeAddFile(pond), allowReorder: true, itemInsertLocation: 'after' });
+                orderPond = pond;
                 // Update the collapse summary as files are added/uploaded/removed.
                 ['addfile', 'processfile', 'processfiles', 'removefile', 'error'].forEach(function (ev) {
                     try { pond.on(ev, scheduleRefresh); } catch (e) { /* older FilePond API */ }