lcp 0.1.0

data/app/assets/javascripts/lcp_ruby/dev_toolbar.js

@@ -0,0 +1,494 @@
+// Dev Toolbar — injects { } buttons on context blocks and opens metadata modal
+(function() {
+  "use strict";
+
+  var BUTTON_CLASS = "lcp-dev-button";
+  var SELECTOR = "[data-lcp-dev-presenter], [data-lcp-dev-zone]";
+
+  // Defensive i18n shim: window.LcpI18n is populated by lcp_i18n_payload_tag
+  // + i18n.js (bundled into application.js). Both live behind
+  // `if Rails.application.config.respond_to?(:assets)` in the layout, while
+  // dev_toolbar.js loads unconditionally whenever DevToolbar is enabled.
+  // In hosts without Sprockets (Propshaft-only, no-asset setups) LcpI18n.t
+  // is undefined, so we fall back to the caller-provided fallback string.
+  function t(key, fallback) {
+    var i18n = window.LcpI18n;
+    if (i18n && typeof i18n.t === "function") return i18n.t(key, fallback);
+    return fallback;
+  }
+
+  function injectButtons() {
+    document.querySelectorAll(SELECTOR).forEach(function(el) {
+      // Skip if this element already has its own button (check direct children only)
+      var children = el.children;
+      var hasButton = false;
+      for (var i = 0; i < children.length; i++) {
+        if (children[i].classList.contains(BUTTON_CLASS)) { hasButton = true; break; }
+      }
+      if (hasButton) return;
+
+      var btn = document.createElement("button");
+      btn.className = BUTTON_CLASS;
+      btn.type = "button";
+      btn.textContent = "{}";
+      btn.title = t("dev_toolbar.button_label", "Dev Tools");
+      btn.addEventListener("click", function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        openModal(el);
+      });
+      el.appendChild(btn);
+    });
+  }
+
+  function getMetadataUrl(el) {
+    var params = new URLSearchParams();
+    var presenter = el.getAttribute("data-lcp-dev-presenter");
+    var page = el.getAttribute("data-lcp-dev-page");
+    var model = el.getAttribute("data-lcp-dev-model");
+    var recordId = el.getAttribute("data-lcp-dev-record-id");
+    var pageType = el.getAttribute("data-lcp-dev-page-type");
+
+    if (presenter) params.set("presenter", presenter);
+    if (page) params.set("page", page);
+    if (model) params.set("model", model);
+    if (recordId) params.set("record_id", recordId);
+    if (pageType) params.set("page_type", pageType);
+
+    var metaTag = document.querySelector("meta[name='lcp-dev-metadata-url']");
+    var basePath = metaTag ? metaTag.content : "/_dev/metadata";
+
+    return basePath + "?" + params.toString();
+  }
+
+  function buildContextLabel(el) {
+    var zone = el.getAttribute("data-lcp-dev-zone");
+    var presenter = el.getAttribute("data-lcp-dev-presenter");
+    var model = el.getAttribute("data-lcp-dev-model");
+    var pageType = el.getAttribute("data-lcp-dev-page-type");
+    var widgetType = el.getAttribute("data-lcp-dev-widget-type");
+    var page = el.getAttribute("data-lcp-dev-page");
+
+    // Primary identifier: zone name or presenter name
+    var primary = zone || presenter || page;
+    if (!primary) return null;
+
+    // Secondary: widget type badge or model name
+    var secondary = widgetType || model;
+
+    var label = primary;
+    if (secondary && secondary !== primary) label += " · " + secondary;
+
+    return label;
+  }
+
+  function openModal(el) {
+    var overlay = createOverlay(buildContextLabel(el));
+    document.body.appendChild(overlay);
+
+    var loadingDiv = overlay.querySelector(".lcp-dev-loading");
+    loadingDiv.textContent = t("dev_toolbar.loading_metadata", "Loading metadata...");
+
+    var url = getMetadataUrl(el);
+    var csrfToken = document.querySelector("meta[name='csrf-token']");
+    var headers = { "Accept": "application/json" };
+    if (csrfToken) headers["X-CSRF-Token"] = csrfToken.content;
+
+    fetch(url, { headers: headers, credentials: "same-origin" })
+      .then(function(resp) {
+        var ct = resp.headers.get("content-type") || "";
+        if (!resp.ok || ct.indexOf("application/json") === -1) {
+          // Try to extract error message from JSON body (e.g. 401 with { error: "..." })
+          if (ct.indexOf("application/json") !== -1) {
+            return resp.json().then(function(data) {
+              var err = new Error(data.error ||
+                (t("dev_toolbar.request_failed", "Request failed") + " (" + resp.status + ")"));
+              err.status = resp.status;
+              throw err;
+            });
+          }
+          var err = new Error(t("dev_toolbar.request_failed", "Request failed") + " (" + resp.status + ")");
+          err.status = resp.status;
+          throw err;
+        }
+        return resp.json();
+      })
+      .then(function(data) {
+        renderModal(overlay, data);
+      })
+      .catch(function(err) {
+        loadingDiv.innerHTML =
+          '<div class="lcp-dev-session-expired">' +
+            '<p>' + escapeHtml(err.message) + '</p>' +
+            '<button class="lcp-dev-reload-btn" type="button" onclick="window.location.reload()">' + escapeHtml(t("dev_toolbar.reload_page", "Reload page")) + '</button>' +
+          '</div>';
+      });
+  }
+
+  function createOverlay(contextLabel) {
+    var overlay = document.createElement("div");
+    overlay.className = "lcp-dev-overlay";
+    overlay.addEventListener("click", function(e) {
+      if (e.target === overlay) overlay.remove();
+    });
+
+    var contextHtml = contextLabel
+      ? '<span class="lcp-dev-context-label">' + escapeHtml(contextLabel) + '</span>'
+      : '';
+
+    var modal = document.createElement("div");
+    modal.className = "lcp-dev-modal";
+    modal.innerHTML =
+      '<div class="lcp-dev-modal-header">' +
+        '<h3>' + escapeHtml(t("dev_toolbar.button_label", "Dev Tools")) + contextHtml + '</h3>' +
+        '<button class="lcp-dev-modal-close" type="button">&times;</button>' +
+      '</div>' +
+      '<div class="lcp-dev-tabs"></div>' +
+      '<div class="lcp-dev-tab-content">' +
+        '<div class="lcp-dev-loading">Loading...</div>' +
+      '</div>';
+
+    modal.querySelector(".lcp-dev-modal-close").addEventListener("click", function() {
+      overlay.remove();
+    });
+
+    overlay.appendChild(modal);
+
+    // Close on Escape
+    var escHandler = function(e) {
+      if (e.key === "Escape") {
+        overlay.remove();
+        document.removeEventListener("keydown", escHandler);
+      }
+    };
+    document.addEventListener("keydown", escHandler);
+
+    return overlay;
+  }
+
+  function highlightAll(container) {
+    if (typeof hljs === "undefined") return;
+    container.querySelectorAll("pre code[class*='language-']").forEach(function(block) {
+      hljs.highlightElement(block);
+    });
+  }
+
+  function renderModal(overlay, data) {
+    var tabs = data.tabs || {};
+    var tabBar = overlay.querySelector(".lcp-dev-tabs");
+    var content = overlay.querySelector(".lcp-dev-tab-content");
+    content.innerHTML = "";
+    tabBar.innerHTML = "";
+
+    var tabOrder = ["model", "presenter", "page", "permissions", "workflow", "view_group", "effective"];
+    var tabLabels = {
+      model: "Model",
+      presenter: "Presenter",
+      page: "Page",
+      permissions: "Permissions",
+      workflow: "Workflow",
+      view_group: "View Group",
+      effective: "Effective"
+    };
+
+    var first = true;
+    tabOrder.forEach(function(key) {
+      if (key === "effective") {
+        if (!data.effective) return;
+      } else {
+        if (!tabs[key]) return;
+      }
+
+      var tabBtn = document.createElement("button");
+      tabBtn.className = "lcp-dev-tab" + (first ? " active" : "");
+      tabBtn.textContent = tabLabels[key];
+      tabBtn.setAttribute("data-tab", key);
+      tabBtn.addEventListener("click", function() { switchTab(overlay, key); });
+      tabBar.appendChild(tabBtn);
+
+      var panel = document.createElement("div");
+      panel.className = "lcp-dev-tab-panel" + (first ? " active" : "");
+      panel.setAttribute("data-tab-panel", key);
+
+      if (key === "effective") {
+        panel.innerHTML = renderEffective(data.effective);
+      } else if (key === "presenter" && tabs[key] && tabs[key].zones) {
+        panel.innerHTML = renderPresenterTab(tabs[key]);
+      } else if (key === "workflow" && tabs[key] && tabs[key].mermaid_code) {
+        panel.innerHTML = renderSourceTab(tabs[key], { mermaid: true });
+      } else {
+        panel.innerHTML = renderSourceTab(tabs[key]);
+      }
+
+      content.appendChild(panel);
+      first = false;
+    });
+
+    highlightAll(content);
+  }
+
+  function switchTab(overlay, key) {
+    overlay.querySelectorAll(".lcp-dev-tab").forEach(function(btn) {
+      btn.classList.toggle("active", btn.getAttribute("data-tab") === key);
+    });
+    overlay.querySelectorAll(".lcp-dev-tab-panel").forEach(function(panel) {
+      panel.classList.toggle("active", panel.getAttribute("data-tab-panel") === key);
+    });
+  }
+
+  function renderSourceTab(tab, options) {
+    if (!tab) return "";
+    var hasMermaid = options && options.mermaid;
+
+    var sourceType = tab.source_type || "unknown";
+    var sourcePath = tab.source_path;
+    var hasSource = tab.content && (sourceType === "yaml" || sourceType === "ruby");
+
+    var html = '<div class="lcp-dev-source-info">';
+    html += '<span class="lcp-dev-source-badge lcp-dev-source-badge-' + escapeHtml(sourceType) + '">' + escapeHtml(sourceTypeLabel(sourceType)) + '</span>';
+    if (sourcePath) {
+      html += '<span class="lcp-dev-source-path">' + escapeHtml(sourcePath) + '</span>';
+    }
+
+    if (hasSource || hasMermaid) {
+      html += '<div class="lcp-dev-toggle">';
+      if (hasSource) html += '<button class="active" data-view="source">Source</button>';
+      html += '<button' + (hasSource ? '' : ' class="active"') + ' data-view="parsed">Parsed</button>';
+      if (hasMermaid) html += '<button data-view="graph">Graph</button>';
+      html += '</div>';
+    }
+    html += '</div>';
+
+    var lang = sourceType === "ruby" ? "ruby" : "yaml";
+    var sourceContent = tab.content || "";
+    var parsedContent = tab.parsed || "";
+
+    html += '<div class="lcp-dev-code" data-source-view="source"' + (hasSource ? '' : ' style="display:none"') + '>';
+    html += '<pre><code class="language-' + lang + '">' + escapeHtml(sourceContent) + '</code></pre>';
+    html += '</div>';
+
+    html += '<div class="lcp-dev-code" data-source-view="parsed"' + (hasSource ? ' style="display:none"' : '') + '>';
+    html += '<pre><code class="language-yaml">' + escapeHtml(parsedContent) + '</code></pre>';
+    html += '</div>';
+
+    if (hasMermaid) {
+      var devDark = typeof LcpRuby !== "undefined" && LcpRuby.isDarkMode();
+      var code = devDark && tab.mermaid_code_dark ? tab.mermaid_code_dark : tab.mermaid_code;
+      html += '<div class="lcp-dev-code lcp-dev-mermaid-container" data-source-view="graph" style="display:none">';
+      html += '<pre class="mermaid">' + escapeHtml(code) + '</pre>';
+      html += '</div>';
+    }
+
+    return html;
+  }
+
+  function renderPresenterTab(presenterData) {
+    var zones = presenterData.zones || [];
+    if (zones.length === 0) return "<p>" + escapeHtml(t("dev_toolbar.no_presenter_data", "No presenter data available")) + "</p>";
+
+    var html = '<div class="lcp-dev-source-info">';
+
+    // Show zone selector if multiple zones
+    if (zones.length > 1) {
+      html += '<select class="lcp-dev-zone-select" data-zone-selector>';
+      zones.forEach(function(z) {
+        html += '<option value="' + escapeHtml(z.zone_name) + '">' + escapeHtml(z.zone_name) + '</option>';
+      });
+      html += '</select>';
+    }
+
+    // Close source-info, will be re-rendered per zone
+    html += '</div>';
+
+    zones.forEach(function(z, i) {
+      html += '<div class="lcp-dev-zone-content" data-zone="' + escapeHtml(z.zone_name) + '"' + (i > 0 ? ' style="display:none"' : '') + '>';
+      html += renderSourceTab(z);
+      html += '</div>';
+    });
+
+    return html;
+  }
+
+  function renderEffective(eff) {
+    if (!eff) return "";
+
+    var html = '<div class="lcp-dev-effective"><table>';
+
+    // Roles
+    var noneLabel = t("dev_toolbar.none", "none");
+    var rolesHtml = (eff.roles && eff.roles.direct) ? eff.roles.direct.join(", ") : noneLabel;
+    html += row("Roles (Direct)", rolesHtml);
+
+    if (eff.roles && eff.roles.from_groups) {
+      var groupPrefix = t("dev_toolbar.group_prefix", "Group: ");
+      Object.keys(eff.roles.from_groups).forEach(function(group) {
+        html += row(groupPrefix + group, eff.roles.from_groups[group].join(", "));
+      });
+    }
+
+    if (eff.impersonated_role) {
+      html += row("Impersonated Role", '<span class="lcp-dev-denied">' + escapeHtml(eff.impersonated_role) + '</span>');
+    }
+
+    // CRUD
+    if (eff.crud) {
+      var crudHtml = "";
+      ["index", "show", "create", "update", "destroy"].forEach(function(op) {
+        var perm = eff.crud[op];
+        crudHtml += '<span class="' + (perm ? 'lcp-dev-permitted' : 'lcp-dev-denied') + '">' +
+          op + (perm ? " \u2713" : " \u2717") + '</span>&nbsp;&nbsp;';
+      });
+      html += row("CRUD Permissions", crudHtml);
+    }
+
+    // Fields
+    html += row("Readable Fields", renderFieldList(eff.readable_fields));
+    html += row("Writable Fields", renderFieldList(eff.writable_fields));
+
+    // Scope
+    html += row("Active Scope", escapeHtml(String(eff.scope || t("dev_toolbar.all", "all"))));
+
+    // Actions
+    if (eff.actions) {
+      var actionsHtml = Array.isArray(eff.actions) ? eff.actions.join(", ") : String(eff.actions);
+      html += row("Custom Actions", escapeHtml(actionsHtml));
+    }
+
+    // Record-specific
+    if (eff.workflow_state) {
+      html += row("Workflow State", escapeHtml(eff.workflow_state));
+    }
+
+    if (eff.available_transitions && eff.available_transitions.length > 0) {
+      var trHtml = eff.available_transitions.map(function(t) {
+        return escapeHtml(t.name) + " \u2192 " + escapeHtml(t.to);
+      }).join(", ");
+      html += row("Available Transitions", trHtml);
+    }
+
+    if (eff.readonly_fields_workflow && eff.readonly_fields_workflow.length > 0) {
+      html += row("Readonly (Workflow)", renderFieldList(eff.readonly_fields_workflow));
+    }
+
+    if (eff.record_rules && eff.record_rules.length > 0) {
+      var rulesHtml = eff.record_rules.map(function(r) {
+        var cls = r.permitted ? "lcp-dev-permitted" : "lcp-dev-denied";
+        return '<span class="' + cls + '">' + escapeHtml(r.action) +
+          (r.permitted ? " \u2713" : " \u2717") + '</span>' +
+          (r.condition_summary ? ' <small>(' + escapeHtml(r.condition_summary) + ')</small>' : '');
+      }).join("<br>");
+      html += row("Record Rules", rulesHtml);
+    }
+
+    html += '</table></div>';
+    return html;
+  }
+
+  function row(label, value) {
+    return '<tr><th>' + escapeHtml(label) + '</th><td>' + value + '</td></tr>';
+  }
+
+  function renderFieldList(fields) {
+    if (!fields || fields.length === 0) return "<em>none</em>";
+    if (typeof fields === "string") return escapeHtml(fields);
+
+    return '<div class="lcp-dev-field-list">' +
+      fields.map(function(f) {
+        return '<span class="lcp-dev-field-tag">' + escapeHtml(f) + '</span>';
+      }).join("") + '</div>';
+  }
+
+  function sourceTypeLabel(type) {
+    var labels = {
+      yaml: "YAML file",
+      ruby: "DSL",
+      database: "Database",
+      auto: "Auto-generated",
+      inline: "Inline DSL"
+    };
+    return labels[type] || type;
+  }
+
+  function escapeHtml(str) {
+    if (!str) return "";
+    var div = document.createElement("div");
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+  }
+
+  // Event delegation for toggle and zone selects
+  document.addEventListener("click", function(e) {
+    // Source/Parsed/Graph toggle
+    var toggleBtn = e.target.closest(".lcp-dev-toggle button");
+    if (toggleBtn) {
+      var panel = toggleBtn.closest(".lcp-dev-tab-panel, .lcp-dev-zone-content");
+      if (!panel) return;
+
+      var view = toggleBtn.getAttribute("data-view");
+      panel.querySelectorAll(".lcp-dev-toggle button").forEach(function(b) {
+        b.classList.toggle("active", b === toggleBtn);
+      });
+      panel.querySelectorAll("[data-source-view]").forEach(function(el) {
+        el.style.display = el.getAttribute("data-source-view") === view ? "" : "none";
+      });
+
+      // Lazy-render Mermaid when graph view becomes visible
+      if (view === "graph" && typeof mermaid !== "undefined" && typeof LcpRuby !== "undefined") {
+        var container = panel.querySelector(".lcp-dev-mermaid-container");
+        if (container && !container.getAttribute("data-mermaid-rendered")) {
+          container.setAttribute("data-mermaid-rendered", "1");
+          mermaid.initialize(LcpRuby.mermaidConfig());
+          mermaid.run({ nodes: container.querySelectorAll(".mermaid") });
+        }
+      }
+    }
+  });
+
+  document.addEventListener("change", function(e) {
+    // Zone selector
+    var zoneSelect = e.target.closest(".lcp-dev-zone-select");
+    if (zoneSelect) {
+      var panel = zoneSelect.closest(".lcp-dev-tab-panel");
+      if (!panel) return;
+
+      var selected = zoneSelect.value;
+      panel.querySelectorAll(".lcp-dev-zone-content").forEach(function(el) {
+        el.style.display = el.getAttribute("data-zone") === selected ? "" : "none";
+      });
+    }
+  });
+
+  // Inject buttons on page load and Turbo navigation
+  function init() {
+    injectButtons();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  document.addEventListener("turbo:render", injectButtons);
+  document.addEventListener("turbo:frame-render", injectButtons);
+
+  // MutationObserver fallback for dynamic content
+  var observer = new MutationObserver(function(mutations) {
+    var shouldInject = false;
+    for (var i = 0; i < mutations.length; i++) {
+      if (mutations[i].addedNodes.length > 0) {
+        shouldInject = true;
+        break;
+      }
+    }
+    if (shouldInject) injectButtons();
+  });
+
+  if (document.body) {
+    observer.observe(document.body, { childList: true, subtree: true });
+  } else {
+    document.addEventListener("DOMContentLoaded", function() {
+      observer.observe(document.body, { childList: true, subtree: true });
+    });
+  }
+})();

data/app/assets/javascripts/lcp_ruby/i18n.js.erb

@@ -0,0 +1,29 @@
+// LCP Ruby — JavaScript i18n bridge
+//
+// Translation payload is populated at request time by LcpRuby::I18nPayloadHelper
+// (rendered as an inline <script> in the layout <head> BEFORE this file loads).
+// This file provides only locale-independent helpers and an empty shim so the
+// compiled asset contains no baked-in strings.
+//
+// Namespaces mirror en.yml 1:1 — lookups like `t("advanced_filter.toggle", ...)`
+// walk window.LcpI18n.advanced_filter.toggle directly. Each segment is guarded
+// so missing namespaces return the fallback cleanly instead of TypeError.
+
+window.LcpI18n = window.LcpI18n || {};
+
+window.LcpI18n.t = function (path, fallback) {
+  var parts = String(path).split(".");
+  var node = window.LcpI18n;
+  for (var i = 0; i < parts.length; i++) {
+    if (!node || typeof node !== "object") return fallback;
+    node = node[parts[i]];
+  }
+  return typeof node === "string" ? node : fallback;
+};
+
+window.LcpI18n.format = function (template, params) {
+  if (template == null) return "";
+  return String(template).replace(/%\{(\w+)\}/g, function (_, k) {
+    return params && params[k] != null ? params[k] : "";
+  });
+};

data/app/assets/javascripts/lcp_ruby/lucide_init.js

@@ -0,0 +1,24 @@
+// Replace every `<i data-lucide="…">` placeholder on the page with an
+// inline SVG glyph. Lucide's `createIcons({ icons })` consumes (and
+// removes) the data attribute as it inserts the SVG, so re-running on
+// Turbo navigations only touches new placeholders — already-rendered
+// icons are left alone.
+//
+// Boot strategy: run on first paint (DOMContentLoaded) AND on every
+// Turbo Drive frame (turbo:render fires after the DOM swap, before the
+// page is visible). This covers full-page loads, Turbo navigations,
+// and Turbo Frame replacements.
+(function () {
+  function paint() {
+    if (typeof window.lucide === "undefined") return;
+    if (typeof window.lucide.createIcons !== "function") return;
+    // Modern Lucide (0.x) requires the icon map to be passed explicitly;
+    // it ships at `window.lucide.icons` from the UMD bundle.
+    window.lucide.createIcons({ icons: window.lucide.icons });
+  }
+
+  document.addEventListener("DOMContentLoaded", paint);
+  document.addEventListener("turbo:load", paint);
+  document.addEventListener("turbo:render", paint);
+  document.addEventListener("turbo:frame-render", paint);
+})();

data/app/assets/javascripts/lcp_ruby/stimulus_bootstrap.js

@@ -0,0 +1,7 @@
+// Stimulus bootstrap — start the application and expose it globally.
+// Controllers register themselves via window.Stimulus.register().
+(function () {
+  var application = Stimulus.Application.start();
+  application.debug = false;
+  window.StimulusApp = application;
+})();

data/app/assets/javascripts/lcp_ruby/utils.js

@@ -0,0 +1,119 @@
+/* Shared field value reader — used by conditional_rendering, cascading_selects, and tom_select_init.
+   scope: the nearest condition scope (row-level or form-level). Falls back to form. */
+window.LcpRuby = window.LcpRuby || {};
+window.LcpRuby.getFieldValue = function(scope, fieldName) {
+  var container = scope;
+  /* Handle checkboxes (Rails hidden+checkbox pattern) */
+  var checkboxes = container.querySelectorAll('input[type="checkbox"][name$="[' + fieldName + ']"]');
+  if (checkboxes.length > 0) {
+    return checkboxes[checkboxes.length - 1].checked ? 'true' : 'false';
+  }
+  /* Handle radio buttons */
+  var radios = container.querySelectorAll('input[type="radio"][name$="[' + fieldName + ']"]');
+  if (radios.length > 0) {
+    for (var i = 0; i < radios.length; i++) {
+      if (radios[i].checked) return radios[i].value;
+    }
+    return '';
+  }
+  /* Handle select and other scalar inputs.
+     For <select multiple>, consumers must use getFieldValues (plural) below
+     — keeping getFieldValue scalar-only avoids surprising visible_when /
+     disable_when comparisons that expect a string. */
+  var input = container.querySelector('[name$="[' + fieldName + ']"]');
+  if (input) return input.value || '';
+  return '';
+};
+
+/* Returns an array of selected values for a multi-input <select multiple>.
+   Returns [] when no such input exists OR when nothing is selected — callers
+   that need to distinguish those cases should also probe getFieldValue.
+   Used by cascade and option-search URL builders to emit
+   `depends_on[parent][]=v1&depends_on[parent][]=v2` for multi-parent setups.
+   Distinct from getFieldValue (scalar) so scalar consumers
+   (conditional_rendering, …) never receive an array. */
+window.LcpRuby.getFieldValues = function(scope, fieldName) {
+  var select = scope.querySelector('select[multiple][name$="[' + fieldName + '][]"]');
+  if (!select) return [];
+  return Array.from(select.selectedOptions).map(function (o) { return o.value; });
+};
+window.LcpRuby.csrfToken = function() {
+  var meta = document.querySelector('meta[name="csrf-token"]');
+  return meta ? meta.getAttribute('content') : null;
+};
+window.LcpRuby.escapeHtml = function(text) {
+  if (text == null) return '';
+  var div = document.createElement('div');
+  div.appendChild(document.createTextNode(String(text)));
+  return div.innerHTML;
+};
+// Remove empty f[...] params from URLSearchParams (prevents blank filter conditions in URL).
+window.LcpRuby.cleanEmptyFilterParams = function(params) {
+  var toDelete = [];
+  params.forEach(function(value, key) {
+    if (key.indexOf('f[') === 0 && value === '') toDelete.push(key);
+  });
+  toDelete.forEach(function(key) { params.delete(key); });
+};
+
+/* Backward-compatible global alias */
+var getFieldValue = window.LcpRuby.getFieldValue;
+
+/* Theme detection helper — the inline <script> resolves "auto" to "dark"/"light"
+   before stylesheets load, so the DOM attribute is always a resolved value. */
+window.LcpRuby.isDarkMode = function() {
+  return document.documentElement.getAttribute("data-lcp-theme") === "dark";
+};
+// Trailing-edge debounce. Returns a function that schedules `fn` after
+// `ms` of inactivity. Pass `signal` to cancel — useful in controller
+// disconnect() to prevent timers from firing after teardown.
+window.LcpRuby.debounce = function(fn, ms) {
+  var timer = null;
+  var wrapper = function() {
+    var args = arguments;
+    var self = this;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(function() { fn.apply(self, args); }, ms);
+  };
+  wrapper.cancel = function() { if (timer) { clearTimeout(timer); timer = null; } };
+  return wrapper;
+};
+
+// Parse an integer data-* attribute with fallback. Non-finite values
+// warn once per (source, attribute, page) via console.warn — deduped to
+// avoid flooding during sustained resize.
+(function() {
+  var warned = new Set();
+  window.LcpRuby.parseIntegerAttr = function(element, attr, fallback, source) {
+    if (!element) return fallback;
+    var raw = element.getAttribute(attr);
+    if (raw == null || raw === "") return fallback;
+    var value = parseInt(raw, 10);
+    if (Number.isFinite(value)) return value;
+    var key = (source || "lcp") + ":" + attr;
+    if (!warned.has(key)) {
+      warned.add(key);
+      // eslint-disable-next-line no-console
+      console.warn("[" + (source || "lcp") + "] non-finite integer for " +
+                   attr + " (got " + JSON.stringify(raw) + ") — ignored.");
+    }
+    return fallback;
+  };
+})();
+
+window.LcpRuby.mermaidConfig = function() {
+  var dark = window.LcpRuby.isDarkMode();
+  var vars = { fontSize: "32px", edgeLabelBackground: "transparent" };
+  if (dark) {
+    vars.background = "transparent";
+    vars.primaryColor = "#2a2a2a";
+    vars.primaryTextColor = "#e0e0e0";
+    vars.primaryBorderColor = "#4a4a4a";
+    vars.lineColor = "#787878";
+    vars.secondaryColor = "#383838";
+    vars.tertiaryColor = "#2f2f2f";
+    vars.nodeTextColor = "#e0e0e0";
+    vars.edgeLabelBackground = "#1e1e1e";
+  }
+  return { startOnLoad: false, theme: dark ? "base" : "neutral", themeVariables: vars };
+};