rails-markup 1.4.2 → 1.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34e44f1b30e4c51432e862ee09efd9d1f72e906a41e0e38f9c7553267f737d6f
-  data.tar.gz: '0909684467d87ed6a1248657ea2fc0e120956b66203c55b47750e74b57971bcb'
+  metadata.gz: 88eacfb8b1c5006e209a9152bda3f464c54675d0460388624aefdae0c106e838
+  data.tar.gz: 34abe3d1f0f3c3cb0304114543bc1649c6c87a47fa7faa67577f37c1cd041bee
 SHA512:
-  metadata.gz: ea571e4c90037645f9f81ddc6e95710ffd6333addee88f6b43b3352ee8be8bcf9afb9b4d0d2868965f30825c370bf668a6e3a61e7fe345c6ae2469e8e205216c
-  data.tar.gz: ec0f2ff1ae946b95e7e6c6a7c0fb90429faa8bab7e8cbe30763a09440056760ab9049aed14b296a36c52095f9c1eae5d45941c6a1ccae8bcc346e5f12d03a5d3
+  metadata.gz: 1910ed15f034f2c343a29e5f2060ad35f868f6cc6a66619e43f21127304bbeb1eef3008a7490d584e3efa2c05964344d5eda6815b2ae0628e4d1a271227df094
+  data.tar.gz: 62cb48444c13a8c2c4812a3e065aff880b87646620166e92f7c21e0f6fb05bf3c0032fa82df423ce6e536b7c34cd1826b5dcc3e21cbc2cec4146b5ac1bd504a7

data/README.md

@@ -33,6 +33,24 @@ bin/rails railties:install:migrations FROM=rails_markup
 bin/rails db:migrate
 ```
 
+### Compatibility: `connection_pool` 3.x
+
+Rails Markup does **not** use Redis or `connection_pool`. However, Rails 7.2 and
+Rails 8.0 apps configured with `:redis_cache_store` fail to boot against
+`connection_pool` 3.x (released Dec 2025): Active Support passes pool options as
+a positional hash, while `connection_pool` 3 requires keyword arguments, raising
+`ArgumentError: wrong number of arguments (given 1, expected 0)` during
+`Rails.application.initialize!`. This is an upstream Rails/`connection_pool`
+incompatibility (fixed in Rails 8.1), unrelated to this gem — but because it
+breaks boot, it will also break `bin/dev`, `db:migrate`, and the migration-copy
+step above whenever this gem happens to be installed.
+
+If you hit it, pin the dependency in your app's Gemfile until you're on Rails 8.1+:
+
+```ruby
+gem "connection_pool", "< 3.0"
+```
+
 ### Rails Markup 1.2 rolling UUID upgrade
 
 The 1.2 upgrade migration adds, repairs, and uniquely indexes `client_uuid`, but

data/app/assets/javascripts/rails_markup/toolbar/00-core.js

@@ -0,0 +1,68 @@
+/**
+ * Rails Markup Toolbar — self-contained annotation UI
+ * No dependencies (no Stimulus, no importmap). Works in any Rails app.
+ *
+ * Usage: include via <script> tag, then call:
+ *   RailsMarkupToolbar.init({ endpoint: "/feedback/api", accent: "indigo" })
+ */
+(function(global) {
+  "use strict";
+
+  if (global.RailsMarkupToolbar) return;
+
+  const RailsMarkupToolbar = {
+    // State
+    annotations: [],
+    outbox: {},
+    legacyMigrations: {},
+    nextId: 1,
+    active: false,
+    serverOnline: false,
+    sessionId: null,
+    sseSource: null,
+    healthInterval: null,
+    hoveredElement: null,
+    selectedText: null,
+    clickedElement: null,
+    activeFilter: "all",
+    editingId: null,
+    _currentScreenshot: null,
+    _storageError: null,
+    _outboxFlushScheduled: false,
+    _outboxFlushTimer: null,
+    _flushPromise: null,
+    _flushAfterPullPromise: null,
+    _healthPromise: null,
+    _pullPromise: null,
+    _pullPageUrl: null,
+    _pullNeeded: true,
+    _syncRetryTimer: null,
+    _syncRetryAttempt: 0,
+    _syncRetryDelay: 0,
+    _syncBaseRetryDelay: 1000,
+    _syncMaxRetryDelay: 30000,
+    _syncMalformedLimit: 3,
+    _syncUnavailable: null,
+    legacyStorageEndpoint: null,
+
+    // Drawing state
+    drawingMode: null,      // null | "arrow" | "rect" | "highlight"
+    drawingCanvas: null,
+    drawingCtx: null,
+    drawingStart: null,
+    drawingHistory: [],
+    _screenshotImg: null,
+
+    // Config
+    endpoint: "/feedback/api",
+    accent: "indigo",
+    position: "bl",
+    size: "default",
+    fabVisible: true,
+    enableScreenshots: true,
+
+    // DOM refs (set in init)
+    root: null,
+    _currentPathname: null,
+    _currentPageUrl: null
+  };

data/app/assets/javascripts/rails_markup/toolbar/10-styles.js

@@ -0,0 +1,82 @@
+  Object.assign(RailsMarkupToolbar, {
+    _injectStyles() {
+      if (document.getElementById("rm-toolbar-styles")) return;
+      const style = document.createElement("style");
+      style.id = "rm-toolbar-styles";
+      style.textContent = `
+        @keyframes rm-pulse { 0%,100%{box-shadow:0 2px 8px rgba(0,0,0,0.2)} 50%{box-shadow:0 2px 12px rgba(0,0,0,0.3),0 0 0 4px rgba(99,102,241,0.15)} }
+        @keyframes rm-toast-in { from{opacity:0;transform:translateY(16px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
+        @keyframes rm-toast-out { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(16px) scale(0.95)} }
+        #rm-toolbar-root { position:fixed; inset:0; pointer-events:none; z-index:9979; }
+        #rm-toolbar-root * { box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; }
+        .rm-fab, .rm-panel-toggle, .rm-panel, .rm-popup { pointer-events:auto; }
+        .rm-fab { position:fixed; z-index:9980; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
+        .rm-fab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
+        .rm-fab-badge { position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 4px; border-radius:10px; background:#ef4444; color:#fff; font-size:11px; font-weight:700; display:none; align-items:center; justify-content:center; }
+        .rm-panel-toggle { position:fixed; z-index:9980; width:32px; height:32px; border-radius:50%; border:1px solid #e5e7eb; background:rgba(255,255,255,0.9); cursor:pointer; display:none; align-items:center; justify-content:center; color:#6b7280; transition:all 0.2s; backdrop-filter:blur(8px); }
+        .rm-panel-toggle:hover { color:#4361ee; }
+        .rm-panel-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
+        .rm-toast-container { position:fixed; z-index:9983; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
+        .rm-pins-container { position:absolute; top:0; left:0; width:100%; z-index:9979; pointer-events:none; }
+        .rm-pin { pointer-events:auto; }
+        .rm-popup { display:none; position:fixed; z-index:9982; width:360px; max-width:calc(100vw - 24px); background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-radius:16px; box-shadow:0 25px 50px rgba(0,0,0,0.1); border:1px solid rgba(229,231,235,0.8); padding:16px; }
+        #rm-toolbar-root .rm-popup textarea { display:block; width:100%; max-width:100%; font-size:13px; font-weight:400; line-height:1.4; color:#1f2937; height:auto; margin:0; border:1px solid #e5e7eb; border-radius:12px; padding:12px; resize:none; outline:none; font-family:inherit; background:#fff; background-image:none; box-shadow:none; appearance:none; -webkit-appearance:none; transition:border-color 0.15s,box-shadow 0.15s; }
+        #rm-toolbar-root .rm-popup textarea:focus { border:1px solid #818cf8; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
+        #rm-toolbar-root .rm-menu { position:relative; display:inline-block; vertical-align:middle; }
+        #rm-toolbar-root .rm-menu-btn { display:inline-flex; align-items:center; gap:4px; width:auto; height:auto; margin:0; font-size:11px; font-weight:500; line-height:1.4; color:#374151; border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; background:#fff; background-image:none; box-shadow:none; outline:none; text-transform:none; appearance:none; -webkit-appearance:none; cursor:pointer; }
+        #rm-toolbar-root .rm-menu-btn:hover { border-color:#d1d5db; background:#fff; }
+        #rm-toolbar-root .rm-menu-btn:focus { outline:none; border-color:#818cf8; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
+        #rm-toolbar-root .rm-menu-btn[aria-expanded="true"] { border-color:#818cf8; }
+        #rm-toolbar-root .rm-menu-chevron { width:10px; height:10px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.55; }
+        #rm-toolbar-root .rm-menu-list { display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:9984; min-width:100%; padding:4px; margin:0; list-style:none; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,0.12); }
+        #rm-toolbar-root .rm-menu-list.rm-menu-open { display:block; }
+        #rm-toolbar-root .rm-menu-option { display:block; width:100%; margin:0; padding:6px 10px; font-size:11px; font-weight:500; line-height:1.4; color:#374151; text-align:left; border:none; border-radius:6px; background:transparent; background-image:none; box-shadow:none; cursor:pointer; appearance:none; -webkit-appearance:none; }
+        #rm-toolbar-root .rm-menu-option:hover, #rm-toolbar-root .rm-menu-option:focus { background:#f3f4f6; outline:none; }
+        #rm-toolbar-root .rm-menu-option-active { background:#eef2ff; color:#4338ca; }
+        #rm-toolbar-root .rm-menu-compact .rm-menu-btn { font-size:10px; padding:2px 6px; border-radius:4px; color:#6b7280; }
+        #rm-toolbar-root .rm-menu-compact .rm-menu-list, #rm-toolbar-root .rm-menu-list-compact { min-width:120px; right:0; left:auto; }
+        #rm-toolbar-root .rm-menu-compact .rm-menu-option, #rm-toolbar-root .rm-menu-list-compact .rm-menu-option { font-size:10px; padding:5px 8px; }
+        .rm-popup-el { font-size:11px; color:#9ca3af; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4; }
+        .rm-popup-text { font-size:12px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; line-height:1.4; }
+        .rm-popup-actions { display:flex; align-items:center; gap:8px; margin-top:8px; }
+        .rm-popup-actions .rm-count { font-size:10px; color:#d1d5db; margin-left:auto; font-variant-numeric:tabular-nums; }
+        #rm-toolbar-root .rm-btn-cancel { padding:6px 12px; font-size:12px; color:#9ca3af; background:none; background-image:none; border:none; box-shadow:none; cursor:pointer; border-radius:8px; appearance:none; -webkit-appearance:none; }
+        #rm-toolbar-root .rm-btn-cancel:hover { color:#6b7280; }
+        #rm-toolbar-root .rm-btn-submit { padding:6px 16px; font-size:12px; font-weight:500; color:#fff; border:none; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:none; appearance:none; -webkit-appearance:none; }
+        #rm-toolbar-root .rm-btn-submit kbd { font-size:9px; opacity:0.6; font-family:sans-serif; }
+        .rm-panel { display:none; position:fixed; z-index:9981; width:380px; max-width:calc(100vw - 48px); max-height:60vh; background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-radius:16px; box-shadow:0 25px 50px rgba(0,0,0,0.1); border:1px solid rgba(229,231,235,0.8); flex-direction:column; }
+        .rm-panel-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #f3f4f6; }
+        .rm-panel-header h3 { font-size:14px; font-weight:600; color:#1f2937; }
+        .rm-panel-count { min-width:20px; text-align:center; padding:2px 6px; font-size:10px; font-weight:600; border-radius:10px; }
+        .rm-panel-close { padding:6px; color:#d1d5db; background:none; border:none; cursor:pointer; border-radius:8px; }
+        .rm-panel-close:hover { color:#6b7280; }
+        .rm-panel-close svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
+        .rm-filter-chips { display:flex; gap:6px; padding:8px 16px; border-bottom:1px solid #f9fafb; }
+        .rm-chip { padding:4px 8px; font-size:10px; font-weight:500; border-radius:10px; cursor:pointer; transition:all 0.15s; border:none; }
+        .rm-chip-active { color:#fff; }
+        .rm-chip-inactive { background:#f9fafb; color:#9ca3af; }
+        .rm-chip-inactive:hover { color:#6b7280; }
+        .rm-panel-list { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
+        .rm-panel-footer { display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid #f3f4f6; font-size:11px; color:#9ca3af; }
+        .rm-status-dot { width:8px; height:8px; border-radius:50%; background:#d1d5db; }
+        .rm-card { padding:12px; background:#fff; border-radius:8px; border:1px solid #f3f4f6; border-left:3px solid; cursor:pointer; transition:all 0.15s; }
+        .rm-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.05); }
+        .rm-card-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
+        .rm-card-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+        .rm-card-id { font-size:10px; font-weight:600; color:#9ca3af; }
+        .rm-card-badge { padding:2px 6px; font-size:10px; font-weight:500; border-radius:10px; }
+        .rm-card-body { margin-top:6px; font-size:13px; line-height:1.5; color:#1f2937; }
+        .rm-card-path { margin-top:4px; font-size:10px; color:#d1d5db; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+        .rm-card-thread { margin-top:8px; padding:8px; background:rgba(249,250,251,0.8); border-radius:8px; font-size:12px; color:#6b7280; border-left:2px solid; }
+        .rm-card-thread-role { font-size:10px; font-weight:500; color:#9ca3af; text-transform:uppercase; letter-spacing:0.05em; }
+        .rm-empty { text-align:center; padding:32px 16px; color:#9ca3af; }
+        .rm-empty-icon { font-size:32px; margin-bottom:8px; }
+        .rm-empty-text { font-size:13px; }
+        .rm-pin { position:absolute; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; color:#fff; font-size:10px; font-weight:700; cursor:pointer; transition:transform 0.2s; z-index:9979; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
+        .rm-pin:hover { transform:scale(1.25); }
+        .rm-pin-active { animation:rm-pulse 2s ease-in-out infinite; }
+        .rm-toast { padding:8px 12px; border-radius:8px; border:1px solid; font-size:12px; font-weight:500; box-shadow:0 2px 8px rgba(0,0,0,0.05); animation:rm-toast-in 0.3s ease; }
+      `;
+      document.head.appendChild(style);
+    },
+  });

data/app/assets/javascripts/rails_markup/toolbar/20-dom.js

@@ -0,0 +1,95 @@
+  Object.assign(RailsMarkupToolbar, {
+    _injectDOM() {
+      const root = document.createElement("div");
+      root.id = "rm-toolbar-root";
+
+      const accentBg = this._accentBg();
+      const accentBgHover = this._accentBgHover();
+      const accentLight = this._accentLight();
+      const accentText = this._accentText();
+
+      // Position: bl (bottom-left), br (bottom-right), tl (top-left), tr (top-right)
+      const posMap = { bl: "bottom:24px;left:24px;", br: "bottom:24px;right:24px;", tl: "top:24px;left:24px;", tr: "top:24px;right:24px;" };
+      const fabPos = posMap[this.position] || posMap.bl;
+
+      // Size: default (48px), compact (40px), slim (32px)
+      const sizeMap = { "default": { dim: 48, icon: 20 }, compact: { dim: 40, icon: 18 }, slim: { dim: 32, icon: 16 } };
+      const fabSize = sizeMap[this.size] || sizeMap["default"];
+
+      // Panel offset matches FAB position
+      const isRight = this.position === "br" || this.position === "tr";
+      const isTop = this.position === "tl" || this.position === "tr";
+      const panelToggleStyle = isRight ? `${isTop ? 'top' : 'bottom'}:24px;right:${fabSize.dim + 8 + 24}px;` : `${isTop ? 'top' : 'bottom'}:24px;left:${fabSize.dim + 8 + 24}px;`;
+      const panelStyle = isRight
+        ? `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;right:24px;`
+        : `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;left:24px;`;
+      const toastStyle = isRight
+        ? `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;right:24px;`
+        : `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;left:24px;`;
+
+      root.innerHTML = `
+        <button class="rm-fab" id="rm-fab" style="${fabPos}width:${fabSize.dim}px;height:${fabSize.dim}px;background:${accentBg};color:#fff;${this.fabVisible ? "" : "display:none;"}" title="Toggle annotation mode" aria-label="Toggle annotation mode" aria-expanded="false" aria-controls="rm-panel">
+          <svg viewBox="0 0 24 24" style="width:${fabSize.icon}px;height:${fabSize.icon}px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
+          <span class="rm-fab-badge" id="rm-fab-badge"></span>
+        </button>
+        <button class="rm-panel-toggle" id="rm-panel-toggle" style="${panelToggleStyle}" title="View annotations" aria-label="View annotations" aria-controls="rm-panel">
+          <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h7"/></svg>
+        </button>
+        <div class="rm-toast-container" id="rm-toast-container" style="${toastStyle}"></div>
+        <div class="rm-popup" id="rm-popup" role="dialog" aria-label="Add annotation" aria-modal="false">
+          <div style="margin-bottom:12px">
+            <p class="rm-popup-el" id="rm-popup-el"></p>
+            <p class="rm-popup-text" id="rm-popup-text"></p>
+          </div>
+          <textarea id="rm-popup-input" rows="3" placeholder="What should change?"></textarea>
+          <div style="display:flex;align-items:center;gap:8px;margin-top:12px">
+            ${this._menuMarkup({ inputId: "rm-intent-select", label: "Intent", value: "change", options: this._intentOptions() })}
+            ${this._menuMarkup({ inputId: "rm-severity-select", label: "Severity", value: "suggestion", options: this._severityOptions() })}
+            <span class="rm-count" id="rm-char-count"></span>
+          </div>
+          <div class="rm-popup-actions">
+            <button class="rm-btn-cancel" id="rm-btn-cancel">Cancel</button>
+            <button class="rm-btn-submit" id="rm-btn-submit" style="background:${accentBg}">
+              <span id="rm-submit-label">Add</span>
+              <kbd>⌘↩</kbd>
+            </button>
+          </div>
+        </div>
+        <div class="rm-panel" id="rm-panel" style="${panelStyle}" role="dialog" aria-label="Annotations panel">
+          <div class="rm-panel-header">
+            <div style="display:flex;align-items:center;gap:8px">
+              <h3>Feedback</h3>
+              <span class="rm-panel-count" id="rm-panel-count" style="background:${accentLight};color:${accentText}">0</span>
+            </div>
+            <button class="rm-panel-close" id="rm-panel-close" aria-label="Close annotations panel">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 18L18 6M6 6l12 12"/></svg>
+            </button>
+          </div>
+          <div class="rm-filter-chips" id="rm-filter-chips">
+            <button class="rm-chip rm-chip-active" data-filter="all" style="background:${accentBg}">All</button>
+            <button class="rm-chip rm-chip-inactive" data-filter="pending">Pending</button>
+            <button class="rm-chip rm-chip-inactive" data-filter="resolved">Resolved</button>
+          </div>
+          <div class="rm-panel-list" id="rm-panel-list"></div>
+          <div class="rm-panel-footer">
+            <span class="rm-status-dot" id="rm-status-dot"></span>
+            <span id="rm-status-text">Offline</span>
+          </div>
+        </div>
+      `;
+
+      document.body.appendChild(root);
+      this.root = root;
+      // Pins container lives on body (not inside fixed root); scroll listener keeps them stuck to target elements
+      const pinsContainer = document.createElement("div");
+      pinsContainer.className = "rm-pins-container";
+      pinsContainer.id = "rm-pins-container";
+      document.body.appendChild(pinsContainer);
+      if (!this._onResize) {
+        this._onResize = this._debouncedRepositionPins(250);
+        this._onScroll = this._debouncedRepositionPins(50);
+        window.addEventListener("resize", this._onResize);
+        window.addEventListener("scroll", this._onScroll, { passive: true });
+      }
+    },
+  });

data/app/assets/javascripts/rails_markup/toolbar/30-menu.js

@@ -0,0 +1,176 @@
+  Object.assign(RailsMarkupToolbar, {
+    _intentOptions() {
+      return [
+        ["fix", "Fix"],
+        ["change", "Change"],
+        ["question", "Question"],
+        ["approve", "Approve"]
+      ];
+    },
+    _severityOptions() {
+      return [
+        ["suggestion", "Suggestion"],
+        ["important", "Important"],
+        ["blocking", "Blocking"]
+      ];
+    },
+    _statusOptions() {
+      return [
+        ["pending", "Pending"],
+        ["acknowledged", "Acknowledged"],
+        ["resolved", "Resolved"],
+        ["dismissed", "Dismissed"]
+      ];
+    },
+    _menuMarkup({ inputId, statusId, label, value, options, compact }) {
+      const current = options.find(([v]) => v === value) || options[0];
+      const currentValue = current[0];
+      const currentLabel = current[1];
+      const menuId = inputId ? `rm-menu-${inputId}` : `rm-menu-status-${statusId}`;
+      const listId = `${menuId}-list`;
+      const inputAttrs = inputId
+        ? `id="${inputId}"`
+        : `data-status-id="${statusId}"`;
+      const optionsHtml = options.map(([v, text]) => {
+        const active = v === currentValue;
+        return `<button type="button" class="rm-menu-option${active ? " rm-menu-option-active" : ""}" role="option" data-menu-owner="${menuId}" data-value="${v}" aria-selected="${active ? "true" : "false"}">${text}</button>`;
+      }).join("");
+      return `<div class="rm-menu${compact ? " rm-menu-compact" : ""}" id="${menuId}">` +
+        `<input type="hidden" ${inputAttrs} value="${currentValue}">` +
+        `<button type="button" class="rm-menu-btn" aria-haspopup="listbox" aria-controls="${listId}" aria-expanded="false" title="${this._esc(label)}" aria-label="${this._esc(label)}">` +
+          `<span class="rm-menu-label">${currentLabel}</span>` +
+          `<svg class="rm-menu-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>` +
+        `</button>` +
+        `<div class="rm-menu-list${compact ? " rm-menu-list-compact" : ""}" id="${listId}" role="listbox" data-menu-owner="${menuId}" aria-label="${this._esc(label)}">${optionsHtml}</div>` +
+      `</div>`;
+    },
+    _menuForElement(element) {
+      if (!element) return null;
+      const nestedMenu = element.closest?.(".rm-menu");
+      if (nestedMenu) return nestedMenu;
+      const ownerId = element.closest?.("[data-menu-owner]")?.dataset.menuOwner;
+      return ownerId ? document.getElementById(ownerId) : null;
+    },
+    _menuList(menu) {
+      if (!menu) return null;
+      return menu.querySelector(".rm-menu-list") ||
+        document.getElementById(`${menu.id}-list`);
+    },
+    _selectMenuOption(option) {
+      const menu = this._menuForElement(option);
+      if (!menu || !this.root?.contains(menu)) return;
+      const value = option.dataset.value;
+      const statusInput = menu.querySelector("[data-status-id]");
+      const statusId = statusInput?.dataset.statusId;
+      this._setMenuValue(menu, value);
+      if (!statusId) return;
+      const id = parseInt(statusId, 10);
+      if (Number.isNaN(id)) return;
+      this._changeStatus(id, value);
+      this.root.querySelector(`[data-status-id="${statusId}"]`)
+        ?.closest(".rm-menu")
+        ?.querySelector(".rm-menu-btn")
+        ?.focus();
+    },
+    _setMenuValue(inputOrMenu, value, restoreFocus = true) {
+      if (!inputOrMenu) return;
+      const menu = inputOrMenu.classList?.contains("rm-menu")
+        ? inputOrMenu
+        : inputOrMenu.closest?.(".rm-menu");
+      const input = menu
+        ? menu.querySelector('input[type="hidden"]')
+        : inputOrMenu;
+      if (!input) return;
+      const resolvedMenu = menu || input.closest(".rm-menu");
+      input.value = value;
+      if (!resolvedMenu) return;
+      const list = this._menuList(resolvedMenu);
+      const option = list?.querySelector(`.rm-menu-option[data-value="${value}"]`);
+      const label = resolvedMenu.querySelector(".rm-menu-label");
+      if (label && option) label.textContent = option.textContent;
+      list?.querySelectorAll(".rm-menu-option").forEach(opt => {
+        const active = opt.dataset.value === value;
+        opt.classList.toggle("rm-menu-option-active", active);
+        opt.setAttribute("aria-selected", active ? "true" : "false");
+      });
+      this._closeMenu(resolvedMenu, restoreFocus);
+    },
+    _toggleMenu(menu) {
+      const open = this._menuList(menu)?.classList.contains("rm-menu-open");
+      this._closeAllMenus();
+      if (!open) this._openMenu(menu);
+    },
+    _openMenu(menu) {
+      const list = this._menuList(menu);
+      const btn = menu.querySelector(".rm-menu-btn");
+      if (!list || !btn) return;
+      this._closeAllMenus();
+      const rect = btn.getBoundingClientRect();
+      const gap = 4;
+      const viewportPadding = 8;
+      const compactWidth = menu.classList.contains("rm-menu-compact") ? 120 : 0;
+      const minimumWidth = Math.max(rect.width || 0, compactWidth);
+
+      list._rmMenuPortalOrigin = {
+        parent: list.parentNode,
+        nextSibling: list.nextSibling
+      };
+      this.root.appendChild(list);
+      list.style.pointerEvents = "auto";
+      list.style.position = "fixed";
+      list.style.top = "0px";
+      list.style.bottom = "";
+      list.style.left = "0px";
+      list.style.right = "auto";
+      list.style.minWidth = `${minimumWidth}px`;
+      list.classList.add("rm-menu-open");
+      btn.setAttribute("aria-expanded", "true");
+
+      const menuWidth = Math.max(list.offsetWidth || 0, rect.width || 0, compactWidth);
+      const menuHeight = list.offsetHeight || 0;
+      const spaceBelow = window.innerHeight - rect.bottom - viewportPadding;
+      const spaceAbove = rect.top - viewportPadding;
+      const openUp = menuHeight > spaceBelow && spaceAbove > spaceBelow;
+      const preferredLeft = compactWidth ? rect.right - menuWidth : rect.left;
+      const maxLeft = Math.max(viewportPadding, window.innerWidth - menuWidth - viewportPadding);
+      const left = Math.min(Math.max(viewportPadding, preferredLeft), maxLeft);
+
+      list.style.position = "fixed";
+      list.style.top = openUp ? "" : `${rect.bottom + gap}px`;
+      list.style.bottom = openUp ? `${window.innerHeight - rect.top + gap}px` : "";
+      list.style.left = `${left}px`;
+      list.style.right = "auto";
+      list.style.minWidth = `${minimumWidth}px`;
+      const availableHeight = Math.max(0, (openUp ? spaceAbove : spaceBelow) - gap);
+      list.style.maxHeight = availableHeight ? `${availableHeight}px` : "";
+      list.style.overflowY = menuHeight > availableHeight && availableHeight > 0 ? "auto" : "";
+
+      const selected = list.querySelector('.rm-menu-option[aria-selected="true"]') ||
+        list.querySelector(".rm-menu-option");
+      selected?.focus();
+    },
+    _closeMenu(menu, restoreFocus = false) {
+      const list = this._menuList(menu);
+      const btn = menu.querySelector(".rm-menu-btn");
+      if (list) {
+        list.classList.remove("rm-menu-open");
+        ["position", "top", "bottom", "left", "right", "minWidth", "maxHeight", "overflowY", "pointerEvents"]
+          .forEach(property => { list.style[property] = ""; });
+        const origin = list._rmMenuPortalOrigin;
+        if (origin?.parent) {
+          if (origin.nextSibling?.parentNode === origin.parent) {
+            origin.parent.insertBefore(list, origin.nextSibling);
+          } else {
+            origin.parent.appendChild(list);
+          }
+        }
+        delete list._rmMenuPortalOrigin;
+      }
+      if (btn) btn.setAttribute("aria-expanded", "false");
+      if (restoreFocus) btn?.focus();
+    },
+    _closeAllMenus() {
+      if (!this.root) return;
+      this.root.querySelectorAll(".rm-menu").forEach(menu => this._closeMenu(menu));
+    },
+  });