lcp 0.1.0

data/app/assets/javascripts/lcp_ruby/controllers/drawer_controller.js

@@ -0,0 +1,205 @@
+// Stimulus controller: lcp-drawer
+//
+// Generic slide-in panel primitive. Used by:
+//   - lcp-responsive-top-nav for the hamburger mode (Phase 1)
+//   - lcp-responsive-sidebar for the off_canvas mode (Phase 2)
+//
+// Responsibilities:
+//   - open()/close()/toggle() lifecycle, [data-open] state attribute, ARIA
+//   - Backdrop element (shared across drawers via refcount; this controller
+//     creates one if none exists)
+//   - Body scroll-lock while any drawer is open
+//   - ESC to close
+//   - Click on backdrop to close
+//   - Focus trap (Tab / Shift+Tab cycle within drawer)
+//   - Restore focus to the opener element after close
+//
+// HTML contract:
+//   <div class="lcp-drawer" data-controller="lcp-drawer">
+//     ... panel content ...
+//   </div>
+// The wrapper element receives [data-open] when open. Consumers wire the
+// open trigger themselves (e.g. a button with `data-action`).
+//
+// Public API:
+//   controller.open(triggerEl)   — opens, traps focus, scroll-lock body
+//   controller.close()           — closes, releases trap, restores focus
+//   controller.toggle(triggerEl) — opens or closes
+//   controller.isOpen            — boolean getter
+//
+// Events emitted (bubbles: true):
+//   - lcp:drawer:open
+//   - lcp:drawer:close
+//
+// Focus-trap stack: when two drawers are open simultaneously, only the
+// topmost (last pushed onto `openDrawers`) responds to ESC + Tab. Every
+// open drawer installs its own document keydown listener; `_handleKeydown`
+// early-returns when `this` is not the topmost entry. Closing splices the
+// drawer out, so the previously-second one becomes topmost and its still-
+// installed listener starts taking effect. Focus is restored per-drawer
+// to that drawer's opener on close.
+
+;(function () {
+  // Module-level state shared across all drawer instances.
+  var openDrawers = [];                 // array of controllers; topmost = last
+  var backdropEl = null;                // shared <div class="lcp-drawer-backdrop">
+  var bodyScrollLockCount = 0;          // refcount; 0 → release
+  var savedBodyOverflow = null;         // restore on last close
+
+  function ensureBackdrop() {
+    if (backdropEl) return backdropEl;
+    backdropEl = document.createElement("div");
+    backdropEl.className = "lcp-drawer-backdrop";
+    backdropEl.setAttribute("aria-hidden", "true");
+    backdropEl.addEventListener("click", function () {
+      // Close the topmost open drawer.
+      var top = openDrawers[openDrawers.length - 1];
+      if (top) top.close();
+    });
+    document.body.appendChild(backdropEl);
+    return backdropEl;
+  }
+
+  function showBackdrop() {
+    var el = ensureBackdrop();
+    el.setAttribute("data-open", "");
+  }
+
+  function hideBackdropIfIdle() {
+    if (!backdropEl) return;
+    if (openDrawers.length === 0) backdropEl.removeAttribute("data-open");
+  }
+
+  function lockBodyScroll() {
+    bodyScrollLockCount += 1;
+    if (bodyScrollLockCount !== 1) return;
+    savedBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+
+  function unlockBodyScroll() {
+    if (bodyScrollLockCount <= 0) return;
+    bodyScrollLockCount -= 1;
+    if (bodyScrollLockCount === 0) {
+      document.body.style.overflow = savedBodyOverflow || "";
+      savedBodyOverflow = null;
+    }
+  }
+
+  // Selector for elements that participate in the Tab cycle.
+  var FOCUSABLE_SELECTOR =
+    "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), " +
+    "input:not([disabled]):not([type='hidden']), select:not([disabled]), " +
+    "[tabindex]:not([tabindex='-1'])";
+
+  window.StimulusApp.register("lcp-drawer", class extends Stimulus.Controller {
+    connect() {
+      this._isOpen = false;
+      this._opener = null;
+      this._onKeydown = this._handleKeydown.bind(this);
+
+      // ARIA dialog attributes are applied per-open / cleared per-close.
+      // The same element can host an always-visible sidebar (above
+      // breakpoint, landmark navigation) AND act as a drawer below
+      // breakpoint — adding role="dialog" unconditionally on connect
+      // would announce the visible sidebar as a modal dialog to AT users.
+    }
+
+    disconnect() {
+      if (this._isOpen) this.close();
+      // Defensive — in case close() didn't run (script error, ordering),
+      // ensure we never leave a stale controller in the openDrawers stack.
+      var idx = openDrawers.indexOf(this);
+      if (idx !== -1) openDrawers.splice(idx, 1);
+    }
+
+    get isOpen() {
+      return this._isOpen;
+    }
+
+    open(triggerEl) {
+      if (this._isOpen) return;
+      this._isOpen = true;
+      this._opener = triggerEl || document.activeElement;
+
+      this.element.setAttribute("role", "dialog");
+      this.element.setAttribute("aria-modal", "true");
+      this.element.setAttribute("data-open", "");
+      openDrawers.push(this);
+      showBackdrop();
+      lockBodyScroll();
+      document.addEventListener("keydown", this._onKeydown, true);
+
+      // Move focus into the drawer (first focusable, or the drawer itself).
+      var firstFocusable = this.element.querySelector(FOCUSABLE_SELECTOR);
+      if (firstFocusable) {
+        firstFocusable.focus();
+      } else {
+        this.element.setAttribute("tabindex", "-1");
+        this.element.focus();
+      }
+
+      this.element.dispatchEvent(new CustomEvent("lcp:drawer:open", { bubbles: true }));
+    }
+
+    close() {
+      if (!this._isOpen) return;
+      this._isOpen = false;
+
+      this.element.removeAttribute("data-open");
+      this.element.removeAttribute("role");
+      this.element.removeAttribute("aria-modal");
+      var idx = openDrawers.indexOf(this);
+      if (idx !== -1) openDrawers.splice(idx, 1);
+      hideBackdropIfIdle();
+      unlockBodyScroll();
+      document.removeEventListener("keydown", this._onKeydown, true);
+
+      if (this._opener && typeof this._opener.focus === "function") {
+        this._opener.focus();
+      }
+      this._opener = null;
+
+      this.element.dispatchEvent(new CustomEvent("lcp:drawer:close", { bubbles: true }));
+    }
+
+    toggle(triggerEl) {
+      this._isOpen ? this.close() : this.open(triggerEl);
+    }
+
+    _handleKeydown(event) {
+      // Only the topmost open drawer responds — supports the Phase 3
+      // stack model without changing this controller's per-instance code.
+      if (openDrawers[openDrawers.length - 1] !== this) return;
+
+      if (event.key === "Escape") {
+        event.preventDefault();
+        this.close();
+        return;
+      }
+
+      if (event.key === "Tab") this._handleTab(event);
+    }
+
+    _handleTab(event) {
+      var focusables = Array.prototype.slice.call(
+        this.element.querySelectorAll(FOCUSABLE_SELECTOR)
+      );
+      if (focusables.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      var first = focusables[0];
+      var last = focusables[focusables.length - 1];
+      var active = document.activeElement;
+
+      if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  });
+})();

data/app/assets/javascripts/lcp_ruby/controllers/dropdown_controller.js

@@ -0,0 +1,160 @@
+// Stimulus controller: lcp-dropdown
+//
+// Click / keyboard / hover open primitive for top-nav dropdowns
+// (.lcp-nav-dropdown) and nested submenus (.lcp-nav-submenu). Replaces the
+// pure-CSS :hover open path with a controller-driven primitive that works
+// on touch devices and keyboards, while preserving hover for true-mouse
+// users.
+//
+// State model:
+//   - Open: element has [data-open] attribute AND aria-expanded="true" on
+//     the toggle button.
+//   - Closed: neither.
+//
+// Open triggers (any of):
+//   - Click / tap on the toggle button.
+//   - Enter or Space on the toggle (native button activation → click).
+//   - ArrowDown on the toggle (opens AND focuses first menu item).
+//
+// Hover is NOT a controller-driven open path. The CSS rule
+// `@media (hover: hover) { .lcp-nav-dropdown:hover ... }` handles visual
+// reveal for true-mouse pointers; the controller is intentionally hover-
+// agnostic so click and hover do not race. (Going through the controller
+// on hover too would cause a click-after-hover to close immediately,
+// since `mouseenter → click` toggles open then closed in a single user
+// gesture.) The submenu flip controller listens for native `mouseenter`
+// for hover-driven repositioning and `lcp:dropdown:open` for the
+// controller-driven path.
+//
+// Close triggers:
+//   - Click on the toggle while open.
+//   - Click outside the wrapper (single shared capture-phase document
+//     listener — see DropdownRegistry below).
+//   - ESC anywhere within the wrapper (focus restored to the toggle).
+//
+// Events emitted (bubbles: true):
+//   - lcp:dropdown:open
+//   - lcp:dropdown:close
+// submenu_controller.js listens to lcp:dropdown:open to run its viewport-
+// flip math under both hover and click paths.
+
+;(function () {
+  var ESC = "Escape";
+  var SPACE = " ";
+  var ARROW_DOWN = "ArrowDown";
+  var FIRST_ITEM_SELECTOR =
+    ".lcp-nav-dropdown-menu a, .lcp-nav-submenu-menu a, " +
+    ".lcp-nav-dropdown-menu button, .lcp-nav-submenu-menu button";
+
+  // Single capture-phase document listener shared by all dropdown instances.
+  // Avoids O(N) listeners on heavy nav, and runs before bubble-phase
+  // handlers (so a click on a link still navigates after closing).
+  var instances = new Set();
+  var outsideClickInstalled = false;
+
+  function handleOutsideClick(event) {
+    instances.forEach(function (controller) {
+      if (!controller.isOpen()) return;
+      if (controller.element.contains(event.target)) return;
+      controller.close({ restoreFocus: false });
+    });
+  }
+
+  function ensureOutsideClickListener() {
+    if (outsideClickInstalled) return;
+    document.addEventListener("click", handleOutsideClick, true);
+    outsideClickInstalled = true;
+  }
+
+  window.StimulusApp.register("lcp-dropdown", class extends Stimulus.Controller {
+    connect() {
+      // The toggle is the immediate child .lcp-nav-dropdown-toggle (top
+      // level) or .lcp-nav-submenu-toggle (nested). Scoping to immediate
+      // children avoids matching a submenu toggle inside a parent dropdown.
+      this._toggle =
+        this.element.querySelector(":scope > .lcp-nav-dropdown-toggle") ||
+        this.element.querySelector(":scope > .lcp-nav-submenu-toggle");
+      if (!this._toggle) return;
+
+      // Initial ARIA. The markup pre-sets aria-haspopup="menu"; the
+      // controller owns aria-expanded throughout its lifecycle.
+      this._toggle.setAttribute("aria-expanded", "false");
+
+      this._onToggleClick = this._handleToggleClick.bind(this);
+      this._onToggleKeydown = this._handleToggleKeydown.bind(this);
+      this._onElementKeydown = this._handleElementKeydown.bind(this);
+
+      this._toggle.addEventListener("click", this._onToggleClick);
+      this._toggle.addEventListener("keydown", this._onToggleKeydown);
+      this.element.addEventListener("keydown", this._onElementKeydown);
+
+      instances.add(this);
+      ensureOutsideClickListener();
+    }
+
+    disconnect() {
+      instances.delete(this);
+      if (!this._toggle) return;
+      this._toggle.removeEventListener("click", this._onToggleClick);
+      this._toggle.removeEventListener("keydown", this._onToggleKeydown);
+      this.element.removeEventListener("keydown", this._onElementKeydown);
+    }
+
+    isOpen() {
+      return this.element.hasAttribute("data-open");
+    }
+
+    open() {
+      if (this.isOpen()) return;
+      if (this._toggle.disabled) return;
+      this.element.setAttribute("data-open", "");
+      this._toggle.setAttribute("aria-expanded", "true");
+      this.element.dispatchEvent(new CustomEvent("lcp:dropdown:open", { bubbles: true }));
+    }
+
+    close(options) {
+      if (!this.isOpen()) return;
+      this.element.removeAttribute("data-open");
+      this._toggle.setAttribute("aria-expanded", "false");
+      this.element.dispatchEvent(new CustomEvent("lcp:dropdown:close", { bubbles: true }));
+      if (options && options.restoreFocus) this._toggle.focus();
+    }
+
+    toggle() {
+      this.isOpen() ? this.close() : this.open();
+    }
+
+    _handleToggleClick() {
+      if (this._toggle.disabled) return;
+      this.toggle();
+    }
+
+    _handleToggleKeydown(event) {
+      // Enter fires native button click → _handleToggleClick handles it.
+      // Space needs preventDefault to stop page scroll on some browsers.
+      if (event.key === SPACE) {
+        event.preventDefault();
+        return;
+      }
+      // ArrowDown — WAI-ARIA menubutton convention: opens AND focuses
+      // the first item, sparing keyboard users a second keystroke.
+      if (event.key === ARROW_DOWN) {
+        event.preventDefault();
+        if (!this.isOpen()) this.open();
+        this._focusFirstItem();
+      }
+    }
+
+    _handleElementKeydown(event) {
+      if (event.key === ESC && this.isOpen()) {
+        event.preventDefault();
+        this.close({ restoreFocus: true });
+      }
+    }
+
+    _focusFirstItem() {
+      var firstLink = this.element.querySelector(FIRST_ITEM_SELECTOR);
+      if (firstLink) firstLink.focus();
+    }
+  });
+})();

data/app/assets/javascripts/lcp_ruby/controllers/export_dialog_controller.js

@@ -0,0 +1,15 @@
+// Stimulus controller: lcp-export-dialog
+// Intercepts export dialog form submit via fetch() to handle file download.
+// If server returns Content-Disposition: attachment → trigger browser download.
+// If server returns HTML → re-render dialog with validation errors.
+;(function () {
+  window.StimulusApp.register("lcp-export-dialog", class extends Stimulus.Controller {
+    static get targets() { return ["form"]; }
+
+    connect() {
+      // File download handling is done by the generic dialog controller
+      // (dialog_controller.js _submitDialogForm detects Content-Disposition: attachment).
+      // This controller is available for future export-specific behavior (progress, etc.).
+    }
+  });
+})();

data/app/assets/javascripts/lcp_ruby/controllers/field_picker_controller.js

@@ -0,0 +1,290 @@
+// Stimulus controller: lcp-field-picker
+// Renders a checkbox tree of model fields for export field selection.
+// Fetches field tree from server JSON endpoint, renders checkboxes,
+// serializes selected fields to hidden input.
+;(function () {
+  window.StimulusApp.register("lcp-field-picker", class extends Stimulus.Controller {
+    static get targets() { return ["hiddenInput", "tree", "profileSelect", "staleNotice"]; }
+    static get values() { return { sourcePresenter: String, fieldName: String, fieldsUrl: String, profilesUrl: String }; }
+
+    connect() {
+      this._selected = new Set();
+      this._profiles = [];
+      this._loadInitialSelection();
+      this._fetchFieldTree();
+      this._fetchProfiles();
+    }
+
+    _loadInitialSelection() {
+      try {
+        const val = this.hiddenInputTarget.value;
+        const arr = JSON.parse(val || "[]");
+        if (Array.isArray(arr)) arr.forEach(f => this._selected.add(f));
+      } catch (e) { /* ignore */ }
+    }
+
+    async _fetchFieldTree() {
+      const presenter = this.sourcePresenterValue;
+      if (!presenter) {
+        const msg = window.LcpI18n.t("export.no_source_presenter", "No source presenter configured");
+        this.treeTarget.innerHTML = '<p class="lcp-text-muted"></p>';
+        this.treeTarget.firstChild.textContent = msg;
+        return;
+      }
+
+      const url = this.fieldsUrlValue || `/${presenter}/export_fields`;
+      try {
+        const response = await fetch(url, {
+          headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest" }
+        });
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const tree = await response.json();
+        this._renderTree(tree);
+      } catch (e) {
+        const msg = window.LcpI18n.t("export.load_failed", "Failed to load fields");
+        this.treeTarget.innerHTML = '<p class="lcp-text-danger"></p>';
+        this.treeTarget.firstChild.textContent = msg;
+        console.error("[LcpFieldPicker] Error fetching field tree:", e);
+      }
+    }
+
+    _renderTree(nodes, prefix = "", depth = 0) {
+      if (depth === 0) {
+        this.treeTarget.innerHTML = "";
+        // Select all / Deselect all buttons
+        const toolbar = document.createElement("div");
+        toolbar.className = "lcp-field-picker-toolbar";
+        const selectAll = document.createElement("button");
+        selectAll.type = "button";
+        selectAll.className = "btn btn-sm btn-outline-secondary";
+        selectAll.textContent = window.LcpI18n.t("export.select_all", "Select all");
+        selectAll.addEventListener("click", () => this._selectAll(nodes, ""));
+        const deselectAll = document.createElement("button");
+        deselectAll.type = "button";
+        deselectAll.className = "btn btn-sm btn-outline-secondary";
+        deselectAll.textContent = window.LcpI18n.t("export.deselect_all", "Deselect all");
+        deselectAll.addEventListener("click", () => this._deselectAll(nodes, ""));
+        toolbar.appendChild(selectAll);
+        toolbar.appendChild(deselectAll);
+        this.treeTarget.appendChild(toolbar);
+      }
+
+      const container = depth === 0 ? this.treeTarget : document.createElement("div");
+      if (depth > 0) container.className = "lcp-field-picker-group";
+
+      nodes.forEach(node => {
+        if (node.type === "group") {
+          this._renderGroup(container, node, prefix, depth);
+        } else {
+          this._renderField(container, node, prefix);
+        }
+      });
+
+      return container;
+    }
+
+    _renderGroup(container, node, prefix, depth) {
+      const groupDiv = document.createElement("div");
+      groupDiv.className = "lcp-field-picker-group-wrapper";
+
+      const header = document.createElement("div");
+      header.className = "lcp-field-picker-group-header";
+      header.style.cursor = "pointer";
+
+      const arrow = document.createElement("span");
+      arrow.className = "lcp-field-picker-arrow";
+      arrow.textContent = "\u25B6";
+
+      const label = document.createElement("span");
+      label.textContent = " " + node.label;
+
+      header.appendChild(arrow);
+      header.appendChild(label);
+      groupDiv.appendChild(header);
+
+      // Custom fields group is a UI grouping only — field paths stay flat
+      const hasCustomFields = (node.children || []).some(c => c.custom_field);
+      const childPrefix = hasCustomFields ? prefix : (prefix ? prefix + "." + node.name : node.name);
+      const children = this._renderTree(node.children || [], childPrefix, depth + 1);
+      children.style.display = "none";
+      groupDiv.appendChild(children);
+
+      header.addEventListener("click", () => {
+        const isOpen = children.style.display !== "none";
+        children.style.display = isOpen ? "none" : "block";
+        arrow.textContent = isOpen ? "\u25B6" : "\u25BC";
+      });
+
+      container.appendChild(groupDiv);
+    }
+
+    _renderField(container, node, prefix) {
+      const path = prefix ? prefix + "." + node.name : node.name;
+      const div = document.createElement("div");
+      div.className = "lcp-field-picker-item";
+      div.style.display = "flex";
+      div.style.alignItems = "center";
+      div.style.gap = "0.25rem";
+
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.id = "field_" + path.replace(/\./g, "__");
+      checkbox.dataset.fieldPath = path;
+      checkbox.checked = this._selected.has(path);
+      checkbox.addEventListener("change", () => {
+        if (checkbox.checked) {
+          this._selected.add(path);
+        } else {
+          this._selected.delete(path);
+        }
+        this._syncHiddenInput();
+      });
+
+      const label = document.createElement("label");
+      label.htmlFor = checkbox.id;
+      label.textContent = " " + node.label;
+      if (node.type && node.type !== "string") {
+        const badge = document.createElement("span");
+        badge.className = "lcp-field-picker-type-badge";
+        badge.textContent = node.type;
+        label.appendChild(document.createTextNode(" "));
+        label.appendChild(badge);
+      }
+
+      div.appendChild(checkbox);
+      div.appendChild(label);
+      container.appendChild(div);
+    }
+
+    _syncHiddenInput() {
+      this.hiddenInputTarget.value = JSON.stringify(Array.from(this._selected));
+    }
+
+    _selectAll(nodes, prefix) {
+      this._walkNodes(nodes, prefix, path => this._selected.add(path));
+      this._syncHiddenInput();
+      this._refreshCheckboxes();
+    }
+
+    _deselectAll(nodes, prefix) {
+      this._walkNodes(nodes, prefix, path => this._selected.delete(path));
+      this._syncHiddenInput();
+      this._refreshCheckboxes();
+    }
+
+    _walkNodes(nodes, prefix, callback) {
+      nodes.forEach(node => {
+        if (node.type === "group") {
+          // Custom fields group is a UI grouping only — field paths stay flat (same as _renderGroup)
+          const hasCustomFields = (node.children || []).some(c => c.custom_field);
+          const childPrefix = hasCustomFields ? prefix : (prefix ? prefix + "." + node.name : node.name);
+          this._walkNodes(node.children || [], childPrefix, callback);
+        } else {
+          const path = prefix ? prefix + "." + node.name : node.name;
+          callback(path);
+        }
+      });
+    }
+
+    _refreshCheckboxes() {
+      this.treeTarget.querySelectorAll("input[type=checkbox]").forEach(cb => {
+        const path = cb.dataset.fieldPath;
+        if (path) cb.checked = this._selected.has(path);
+      });
+    }
+
+    async _fetchProfiles() {
+      const presenter = this.sourcePresenterValue;
+      if (!presenter) return;
+      if (!this.hasProfileSelectTarget) return;
+
+      const url = this.profilesUrlValue || `/${presenter}/export_profiles`;
+      try {
+        const response = await fetch(url, {
+          headers: { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest" }
+        });
+        if (!response.ok) return;
+        this._profiles = await response.json();
+        this._renderProfileDropdown();
+      } catch (e) {
+        console.error("[LcpFieldPicker] Error fetching profiles:", e);
+      }
+    }
+
+    _renderProfileDropdown() {
+      const select = this.profileSelectTarget;
+      select.innerHTML = "";
+      const blank = document.createElement("option");
+      blank.value = "";
+      blank.textContent = window.LcpI18n.t("export.profile_select_blank", "-- select --");
+      select.appendChild(blank);
+
+      this._profiles.forEach(p => {
+        const opt = document.createElement("option");
+        opt.value = p.id;
+        opt.textContent = p.profile_name;
+        select.appendChild(opt);
+      });
+
+      select.addEventListener("change", () => this._onProfileChange(select.value));
+    }
+
+    _onProfileChange(profileId) {
+      if (!profileId) return;
+      const profile = this._profiles.find(p => String(p.id) === String(profileId));
+      if (!profile) return;
+
+      // Show stale field notice if any
+      if (this.hasStaleNoticeTarget) {
+        if (profile.stale_fields && profile.stale_fields.length > 0) {
+          this.staleNoticeTarget.textContent = window.LcpI18n.format(
+            window.LcpI18n.t("export.stale_fields_notice",
+              "%{count} fields from this profile are no longer available: %{fields}"),
+            { count: profile.stale_fields.length, fields: profile.stale_fields.join(", ") }
+          );
+          this.staleNoticeTarget.hidden = false;
+        } else {
+          this.staleNoticeTarget.hidden = true;
+        }
+      }
+
+      // Load valid fields
+      this._selected.clear();
+      if (Array.isArray(profile.selected_fields)) {
+        profile.selected_fields.forEach(f => this._selected.add(f));
+      }
+      this._syncHiddenInput();
+      this._refreshCheckboxes();
+
+      // Update format field if present
+      if (profile.format) {
+        const formatField = document.querySelector('[name="record[format]"]');
+        if (formatField) formatField.value = profile.format;
+      }
+
+      // Update formatting options if present
+      if (profile.formatting_options) {
+        const optsField = document.querySelector('[name="record[formatting_options]"]');
+        if (optsField) {
+          if (typeof profile.formatting_options === "object") {
+            // Update individual selects if structured UI exists
+            Object.entries(profile.formatting_options).forEach(([key, val]) => {
+              const sel = document.querySelector(`[name="record[formatting_options][${key}]"]`);
+              if (sel) sel.value = val;
+            });
+          }
+        }
+      }
+    }
+
+    // Public: load profile data and update checkboxes
+    loadProfile(selectedFields) {
+      this._selected.clear();
+      if (Array.isArray(selectedFields)) {
+        selectedFields.forEach(f => this._selected.add(f));
+      }
+      this._syncHiddenInput();
+      this._refreshCheckboxes();
+    }
+  });
+})();