plutonium 0.61.0 → 0.62.0

data/app/assets/plutonium.js

@@ -17340,6 +17340,7 @@ ${text2}</tr>
   // src/js/controllers/intl_tel_input_controller.js
   var intl_tel_input_controller_default = class extends Controller {
     static targets = ["input"];
+    static values = { options: Object };
     connect() {
     }
     disconnect() {
@@ -17376,7 +17377,8 @@ ${text2}</tr>
       return {
         strictMode: true,
         hiddenInput: () => ({ phone: this.inputTarget.attributes.name.value }),
-        loadUtilsOnInit: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.8.1/build/js/utils.js"
+        loadUtilsOnInit: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.8.1/build/js/utils.js",
+        ...this.optionsValue
       };
     }
   };
@@ -28913,7 +28915,7 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
 
   // src/js/controllers/kanban_controller.js
   var kanban_controller_default = class extends Controller {
-    static values = { moveUrlTemplate: String };
+    static values = { moveUrlTemplate: String, collapseCookie: String, collapsePath: String };
     static targets = ["column"];
     connect() {
       this.draggedCard = null;
@@ -28927,7 +28929,30 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
       this.element.addEventListener("dragleave", this.onDragLeave);
       this.element.addEventListener("drop", this.onDrop);
       this.element.addEventListener("dragend", this.onDragEnd);
-      this.#applyPersistedCollapseStates();
+      this.scrollTarget = this.#readStoredScroll();
+      this.captureScroll = this.#captureScroll.bind(this);
+      this.onBoardScroll = () => {
+        if (this.restoringScroll) return;
+        clearTimeout(this.scrollSaveTimer);
+        this.scrollSaveTimer = setTimeout(this.captureScroll, 120);
+      };
+      this.element.addEventListener("scroll", this.onBoardScroll, { passive: true });
+      this.onUserScrollIntent = () => this.#endScrollRestore();
+      this.element.addEventListener("wheel", this.onUserScrollIntent, { passive: true });
+      this.element.addEventListener("touchmove", this.onUserScrollIntent, { passive: true });
+      this.onPageHide = this.captureScroll;
+      window.addEventListener("pagehide", this.onPageHide);
+      this.onTurboLoad = this.#syncColumnsToUrl.bind(this);
+      this.onBeforeFrameRender = this.#onBeforeFrameRender.bind(this);
+      this.onFrameRender = this.#onFrameRender.bind(this);
+      this.onBeforeStreamRender = this.#onBeforeStreamRender.bind(this);
+      document.addEventListener("turbo:load", this.onTurboLoad);
+      document.addEventListener("turbo:before-frame-render", this.onBeforeFrameRender);
+      document.addEventListener("turbo:frame-render", this.onFrameRender);
+      document.addEventListener("turbo:before-stream-render", this.onBeforeStreamRender);
+      this.#syncColumnsToUrl();
+      this.#restoreScrollLeft();
+      this.#reloadAfterWrite();
     }
     disconnect() {
       this.element.removeEventListener("dragstart", this.onDragStart);
@@ -28935,6 +28960,189 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
       this.element.removeEventListener("dragleave", this.onDragLeave);
       this.element.removeEventListener("drop", this.onDrop);
       this.element.removeEventListener("dragend", this.onDragEnd);
+      this.#captureScroll();
+      this.element.removeEventListener("scroll", this.onBoardScroll);
+      this.element.removeEventListener("wheel", this.onUserScrollIntent);
+      this.element.removeEventListener("touchmove", this.onUserScrollIntent);
+      window.removeEventListener("pagehide", this.onPageHide);
+      clearTimeout(this.restoreScrollTimer);
+      clearTimeout(this.scrollSaveTimer);
+      document.removeEventListener("turbo:load", this.onTurboLoad);
+      document.removeEventListener("turbo:before-frame-render", this.onBeforeFrameRender);
+      document.removeEventListener("turbo:frame-render", this.onFrameRender);
+      document.removeEventListener("turbo:before-stream-render", this.onBeforeStreamRender);
+    }
+    // ─── Frozen-board URL sync ────────────────────────────────────────────────────
+    // Reconcile every column frame's src with the current URL's board params
+    // (q / scope / sort). The board is frozen (data-turbo-permanent), so its
+    // frames keep whatever src they were last loaded with; this is what reflects a
+    // new search / filter / scope into the columns.
+    //
+    // STATELESS by design: we compare each frame's actual src against the src the
+    // current URL implies and reload only the ones that differ. We deliberately do
+    // NOT track "last synced URL" — Turbo reconnects this controller on every nav
+    // (the permanent board is transplanted), so any per-connect state would be
+    // reset to the new URL before we could diff against it, and the sync would
+    // never fire. Comparing frame-src-vs-URL has no such blind spot and is
+    // self-limiting: once a frame matches the URL, it won't reload again.
+    // A create/update/destroy that returns to the board redirects to a URL the
+    // server tagged with kanban_reload=1 (see KanbanActions#kanban_reload_url).
+    // The board is data-turbo-permanent, so its already-loaded column frames are
+    // kept as-is on arrival — stale (missing a new card, still showing a deleted
+    // one). Force every column to re-fetch, then strip the marker so a later
+    // reload / back-nav doesn't re-trigger it. The restore window opened by
+    // #restoreScrollLeft keeps the scroll pinned as the fresh frames render.
+    #reloadAfterWrite() {
+      const url = new URL(window.location.href);
+      if (!url.searchParams.has("kanban_reload")) return;
+      url.searchParams.delete("kanban_reload");
+      history.replaceState(history.state, "", `${url.pathname}${url.search}${url.hash}`);
+      this.#columnFrames().forEach((frame) => frame.reload());
+    }
+    #syncColumnsToUrl() {
+      this.#columnFrames().forEach((frame) => {
+        const desired = this.#columnFrameSrc(frame.dataset.kanbanColFrame);
+        const current = frame.getAttribute("src");
+        if (current && this.#canonicalUrl(current) === this.#canonicalUrl(desired)) return;
+        frame.src = desired;
+      });
+    }
+    // The src a column frame should carry for the current URL: the page's query
+    // params with view=kanban + column=<key> forced on. Mirrors the server's
+    // Kanban::Resource#column_frame_src so a freshly-rendered board's frames
+    // already match (no spurious reload).
+    #columnFrameSrc(key) {
+      const params = new URLSearchParams(window.location.search);
+      params.set("view", "kanban");
+      params.set("column", key);
+      return `${window.location.pathname}?${params.toString()}`;
+    }
+    // Order-independent identity for a frame src: path + alphabetically sorted
+    // query params. The server serialises params sorted (Hash#to_query) while
+    // URLSearchParams preserves insertion order, so raw string comparison would
+    // report a false difference and reload every frame on every nav.
+    #canonicalUrl(src) {
+      const url = new URL(src, window.location.origin);
+      url.searchParams.sort();
+      return `${url.pathname}?${url.searchParams.toString()}`;
+    }
+    // Turbo fires this before a frame renders fetched content. For our column
+    // frames we swap in a morph render so the reload diffs the card list rather
+    // than replacing it (which would blank the column). Uses Turbo's own frame
+    // morph so before/after hooks (turbo:before-frame-morph) still fire.
+    #onBeforeFrameRender(event) {
+      if (!this.#isColumnFrame(event.target)) return;
+      event.detail.render = (currentElement, newElement) => morphTurboFrameElements(currentElement, newElement);
+    }
+    #onFrameRender(event) {
+      if (!this.#isColumnFrame(event.target)) return;
+      if (this.restoringScroll) {
+        this.#pinScroll();
+        this.#bumpRestoreTimer();
+      }
+    }
+    // Apply the saved horizontal position: to the live max when the user was at
+    // the end (so it tracks late width changes), otherwise to the exact offset.
+    // No-op when nothing meaningful was saved so it can't yank a fresh board to 0.
+    #pinScroll() {
+      const t4 = this.scrollTarget;
+      if (!t4 || !t4.l && !t4.e) return;
+      this.element.scrollLeft = t4.e ? this.element.scrollWidth : t4.l;
+    }
+    // Re-apply the saved horizontal scroll across a window that extends with each
+    // column render, because renders (morph on nav, replace on move, lazy load on
+    // full reload) settle their width late and each settle can clamp scrollLeft
+    // back toward 0. Used by the reattach, turbo-stream, and initial-load paths.
+    #scheduleScrollRestore() {
+      if (!this.scrollTarget || !this.scrollTarget.l && !this.scrollTarget.e) return;
+      this.restoringScroll = true;
+      this.#pinScroll();
+      requestAnimationFrame(() => this.#pinScroll());
+      this.#bumpRestoreTimer();
+    }
+    // (Re)arm the timer that ends the restore window. Reset on every column render
+    // so the window lives ~400ms past the LAST column to settle — enough for slow
+    // lazy frames on a fresh load without pinning forever.
+    #bumpRestoreTimer() {
+      clearTimeout(this.restoreScrollTimer);
+      this.restoreScrollTimer = setTimeout(() => this.#endScrollRestore(), 400);
+    }
+    #endScrollRestore() {
+      if (!this.restoringScroll) return;
+      this.#pinScroll();
+      this.restoringScroll = false;
+      clearTimeout(this.restoreScrollTimer);
+    }
+    // Restore on connect — covers Turbo reattach (search/filter) and a full page
+    // reload (F5), since scrollTarget is seeded from sessionStorage either way.
+    #restoreScrollLeft() {
+      this.#scheduleScrollRestore();
+    }
+    // ── scroll persistence (sessionStorage) ──
+    // Per-tab and auto-cleared on tab close, so it can't accumulate. Keyed by the
+    // board's collection path (tenant + resource scoped) via the move template.
+    #scrollKey() {
+      const path = this.moveUrlTemplateValue.replace("/__ID__/kanban_move", "");
+      return `pu-kanban-scroll:${path}`;
+    }
+    #readStoredScroll() {
+      try {
+        const raw = sessionStorage.getItem(this.#scrollKey());
+        return raw ? JSON.parse(raw) : null;
+      } catch {
+        return null;
+      }
+    }
+    // Read the live position (unless a restore currently owns scrollTarget) and
+    // persist it. Runs on the scroll debounce, on pagehide, and on disconnect —
+    // never on the raw scroll event, so the layout read can't stutter scrolling.
+    #captureScroll() {
+      const el = this.element;
+      if (!this.restoringScroll && el.clientWidth > 0) {
+        const maxScroll = el.scrollWidth - el.clientWidth;
+        this.scrollTarget = {
+          l: el.scrollLeft,
+          e: maxScroll > 0 && el.scrollLeft >= maxScroll - 2
+        };
+      }
+      if (!this.scrollTarget) return;
+      try {
+        sessionStorage.setItem(this.#scrollKey(), JSON.stringify(this.scrollTarget));
+      } catch {
+      }
+    }
+    // A move / realtime update re-renders columns via turbo-stream (replace). The
+    // server renders them in the user's collapse state, so we only need to protect
+    // the horizontal scroll: freeze tracking BEFORE the swap (replacing a column
+    // briefly removes it, narrowing the board so scrollLeft clamps toward 0 — that
+    // clamp would otherwise be saved as the new position, a visible jump at the
+    // far end), then restore once the columns are back.
+    #onBeforeStreamRender(event) {
+      if (!this.#streamTargetsColumn(event.target)) return;
+      const render = event.detail.render;
+      event.detail.render = async (streamElement) => {
+        this.restoringScroll = true;
+        await render(streamElement);
+        this.#scheduleScrollRestore();
+      };
+    }
+    // True when the <turbo-stream> element targets a column frame contained by
+    // this board — via its `target` (frame id) or `targets` (CSS selector).
+    #streamTargetsColumn(streamElement) {
+      if (!streamElement) return false;
+      const target = streamElement.getAttribute("target");
+      if (target) return this.#isColumnFrame(document.getElementById(target));
+      const targets = streamElement.getAttribute("targets");
+      if (targets) {
+        return [...document.querySelectorAll(targets)].some((el) => this.#isColumnFrame(el));
+      }
+      return false;
+    }
+    #columnFrames() {
+      return this.element.querySelectorAll("turbo-frame[data-kanban-col-frame]");
+    }
+    #isColumnFrame(el) {
+      return el?.matches?.("turbo-frame[data-kanban-col-frame]") && this.element.contains(el);
     }
     // ─── Collapse toggle ─────────────────────────────────────────────────────────
     // Stimulus action: data-action="click->kanban#toggleColumn"
@@ -28949,14 +29157,9 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
       const strip = wrapper.querySelector("[data-kanban-role='strip']");
       const body = wrapper.querySelector("[data-kanban-role='body']");
       if (!strip || !body) return;
-      const isCollapsed = wrapper.classList.contains("pu-kanban-column-collapsed");
-      if (isCollapsed) {
-        wrapper.classList.remove("pu-kanban-column-collapsed");
-        this.#saveCollapseState(key, false);
-      } else {
-        wrapper.classList.add("pu-kanban-column-collapsed");
-        this.#saveCollapseState(key, true);
-      }
+      const nowCollapsed = wrapper.classList.toggle("pu-kanban-column-collapsed");
+      const defaultCollapsed = wrapper.dataset.kanbanDefaultCollapsed === "true";
+      this.#persistCollapse(key, nowCollapsed !== defaultCollapsed);
     }
     // ─── drag lifecycle ──────────────────────────────────────────────────────────
     #onDragStart(event) {
@@ -28995,6 +29198,23 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
       const toColumn = column.dataset.kanbanColumnKeyValue;
       const existingCards = [...column.querySelectorAll("[data-kanban-record-id]")].filter((c4) => c4 !== this.draggedCard);
       const toIndex = this.#computeDropIndex(event.clientY, existingCards);
+      const destWrapper = column.closest("[data-kanban-col]");
+      if (destWrapper?.dataset.kanbanDropInteraction === "true" && fromColumn !== toColumn) {
+        if (destWrapper.dataset.kanbanDropImmediate === "true") {
+          const confirmMsg = destWrapper.dataset.kanbanDropConfirm;
+          if (confirmMsg && !window.confirm(confirmMsg)) return;
+        } else if (this.#openDropInteraction(destWrapper, { recordId, fromColumn, toColumn, toIndex })) {
+          return;
+        }
+      }
+      this.#submitMove(recordId, { fromColumn, toColumn, toIndex });
+    }
+    // Direct move: POST {from_column, to_column, to_index} to the move endpoint
+    // and feed the Turbo Stream response to Turbo. On success the server
+    // re-renders the from + to column frames; on 422 it re-renders only the
+    // source frame so the card snaps back — the controller never hand-manages
+    // rollback state.
+    async #submitMove(recordId, { fromColumn, toColumn, toIndex }) {
       const url = this.moveUrlTemplateValue.replace("__ID__", recordId);
       const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ?? "";
       try {
@@ -29012,14 +29232,46 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
           }),
           credentials: "same-origin"
         });
-        const body = await response.text();
-        if (window.Turbo) {
+        const contentType = response.headers.get("Content-Type") || "";
+        const isTurboStream = contentType.includes("text/vnd.turbo-stream.html");
+        if (isTurboStream && window.Turbo) {
+          const body = await response.text();
           Turbo.renderStreamMessage(body);
+        } else if (!response.ok) {
+          console.error(`[kanban] move rejected (${response.status}); leaving card in place`);
+        } else {
+          console.warn("[kanban] move returned a non-stream response (session expired?); leaving card in place");
         }
       } catch (error2) {
         console.error("[kanban] move request failed:", error2);
       }
     }
+    // ─── drop-interaction modal ────────────────────────────────────────────────
+    //
+    // A cross-column drop into an enter_interaction column opens the interaction's
+    // form in the shared remote-modal frame instead of committing the move.
+    //
+    // Native HTML5 drag-and-drop never re-parents the card's DOM node — the card
+    // physically stays in its SOURCE column throughout, so there is nothing to
+    // snap back on cancel: dismissing the modal simply leaves the board as it
+    // already is. On success the server's turbo-stream re-renders the kanban-col-*
+    // frames and empties the remote_modal frame, so the board updates naturally.
+    //
+    // Returns true when the modal was opened (caller should stop), false when the
+    // remote-modal frame is unavailable (caller falls back to the direct POST).
+    #openDropInteraction(destWrapper, { recordId, fromColumn, toColumn, toIndex }) {
+      const template = destWrapper.dataset.kanbanDropFormUrlTemplate;
+      const frame = document.getElementById("remote_modal");
+      if (!frame || !template) return false;
+      const params = new URLSearchParams({
+        from_column: fromColumn,
+        to_column: toColumn,
+        to_index: toIndex
+      });
+      const url = `${template.replace("__ID__", recordId)}?${params.toString()}`;
+      frame.src = url;
+      return true;
+    }
     #onDragEnd(_event) {
       this.#clearHighlights();
       this.#clearDropHints();
@@ -29050,32 +29302,38 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
       if (accepts === "none") return false;
       return accepts.split(",").map((k4) => k4.trim()).includes(sourceKey);
     }
-    // ─── collapse persistence ─────────────────────────────────────────────────────
-    // Applies localStorage collapse states to all column wrappers currently in
-    // the DOM. Called on connect() and implicitly after Turbo frame swaps
-    // because Stimulus re-connects the controller when the frame content changes.
-    #applyPersistedCollapseStates() {
-      this.element.querySelectorAll("[data-kanban-col]").forEach((wrapper) => {
-        const key = wrapper.dataset.kanbanCol;
-        const stored = localStorage.getItem(this.#storageKey(key));
-        if (stored === null) return;
-        const collapsed = stored === "1";
-        wrapper.classList.toggle("pu-kanban-column-collapsed", collapsed);
-      });
-    }
-    #saveCollapseState(key, collapsed) {
-      try {
-        localStorage.setItem(this.#storageKey(key), collapsed ? "1" : "0");
-      } catch {
+    // ─── collapse persistence (cookie delta) ───────────────────────────────────
+    //
+    // The cookie stores ONLY the column keys whose state differs from the server
+    // default, comma-joined (e.g. "todo,done"). The server reads it and renders
+    // each column in the user's state directly, so there's no client re-apply and
+    // no FOUC on any render path. The delta encoding keeps it compact and
+    // self-trimming: a board at its defaults has no cookie, and toggling a column
+    // back to default drops its key (and an empty set deletes the cookie).
+    // `flipped` = the column's state now differs from its default.
+    #persistCollapse(key, flipped) {
+      const keys = new Set(this.#readCollapseCookie());
+      if (flipped) keys.add(key);
+      else keys.delete(key);
+      this.#writeCollapseCookie([...keys]);
+    }
+    #readCollapseCookie() {
+      const name = this.collapseCookieValue;
+      if (!name) return [];
+      const entry = document.cookie.split("; ").find((c4) => c4.startsWith(`${name}=`));
+      if (!entry) return [];
+      return decodeURIComponent(entry.slice(name.length + 1)).split(",").filter(Boolean);
+    }
+    #writeCollapseCookie(keys) {
+      const name = this.collapseCookieValue;
+      if (!name) return;
+      const path = this.collapsePathValue || "/";
+      if (keys.length === 0) {
+        document.cookie = `${name}=; path=${path}; max-age=0; SameSite=Lax`;
+        return;
       }
-    }
-    // Derives a unique localStorage key from the resource collection path so
-    // different boards (different resources / tenants) don't share state.
-    // The move URL template is "/path/__ID__/kanban_move"; strip the suffix to
-    // recover the collection path.
-    #storageKey(key) {
-      const path = this.moveUrlTemplateValue.replace("/__ID__/kanban_move", "");
-      return `pu-kanban:${path}:${key}:collapsed`;
+      const value = encodeURIComponent(keys.join(","));
+      document.cookie = `${name}=${value}; path=${path}; max-age=${60 * 60 * 24 * 180}; SameSite=Lax`;
     }
     // ─── helpers ─────────────────────────────────────────────────────────────────
     // Returns the 0-based insertion index within the destination column by
@@ -29099,6 +29357,24 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
     }
   };
 
+  // src/js/controllers/currency_input_controller.js
+  var currency_input_controller_default = class extends Controller {
+    static targets = ["prefix", "field"];
+    // Space between the prefix and the first digit, in px.
+    static values = { gap: { type: Number, default: 6 } };
+    connect() {
+      this.#pad();
+      document.fonts.ready.then(() => this.#pad());
+    }
+    #pad() {
+      this.fieldTarget.style.setProperty(
+        "padding-left",
+        `${this.prefixTarget.offsetWidth + this.gapValue}px`,
+        "important"
+      );
+    }
+  };
+
   // src/js/controllers/register_controllers.js
   function register_controllers_default(application2) {
     application2.register("password-visibility", password_visibility_controller_default);
@@ -29139,6 +29415,7 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
     application2.register("dirty-form-guard", dirty_form_guard_controller_default);
     application2.register("wizard", wizard_controller_default);
     application2.register("kanban", kanban_controller_default);
+    application2.register("currency-input", currency_input_controller_default);
   }
 
   // src/js/turbo/turbo_actions.js