rails-markup 1.4.5 → 1.4.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f116e4650e408eb4c0157a1ecdfe528025dcc1fe56e48d56d5d878e6aeb76625
-  data.tar.gz: 989ea2f307e753b10c68e257b8206b7b3fe8fef47b1d3eeace916e1fc50f8306
+  metadata.gz: 71cb0dfae1e50403d787bb64d3760a95181fbf2e4fbd7ce6c57629d226fd2dae
+  data.tar.gz: ba57fa0fde60fd7b8c314ad63d8b2df16c3580076269392991928e81e3a6d53a
 SHA512:
-  metadata.gz: dbcf8ce0f1c775122d1b58440dd648c7e02f22c63f25a0817d514e4951078ee283d859d3c7ac6ee5da37695feaaa756411d368b450a9f14be09050f6a99bf14f
-  data.tar.gz: 4b2d4640b67a39c5e8ce41a99481afe6cf153112657919d9e2b3160df732c319fb34ecbbd458db32974bdb545b68d17a4c3ab04dcc62095b04bcb58f9a17a480
+  metadata.gz: 7bb524122341ef07f5ea882964f931e4bb766e4c493a7fb0493f0a0c1ca7fb793055ad513219df8f13bafc578b2ea5113bba0fe86f3b51eabaa15b4e12b36cb5
+  data.tar.gz: 7f2f47ab1f1692dcb9ff5127b7691dd5ca2691a1a2944056d6e65bc9f2cf5dd998c2e58554722f23b80df36e64aa486f94b5f746b60e4a95d01e1a3f93898e16

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

@@ -27,6 +27,7 @@
     activeFilter: "all",
     editingId: null,
     _currentScreenshot: null,
+    toolbarSettings: {},
     _storageError: null,
     _outboxFlushScheduled: false,
     _outboxFlushTimer: null,
@@ -44,6 +45,8 @@
     _syncMalformedLimit: 3,
     _syncUnavailable: null,
     legacyStorageEndpoint: null,
+    _bootstrapOptions: null,
+    _settingsPanelOpen: false,
 
     // Drawing state
     drawingMode: null,      // null | "arrow" | "rect" | "highlight"

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

@@ -9,13 +9,17 @@
         @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, .rm-panel-toggle, .rm-toolbar-settings, .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-panel-toggle-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; display:none; align-items:center; justify-content:center; }
+        .rm-toolbar-settings { position:fixed; z-index:9980; width:32px; height:32px; border-radius:50%; border:1px solid #e5e7eb; background:#fff; cursor:pointer; display:none; align-items:center; justify-content:center; color:#6b7280; transition:all 0.2s; backdrop-filter:blur(8px); }
+        .rm-toolbar-settings:hover { color:#374151; background:#f9fafb; }
+        .rm-toolbar-settings 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; }
@@ -47,7 +51,13 @@
         .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-header-actions { display:flex; align-items:center; gap:6px; }
         .rm-panel-count { min-width:20px; text-align:center; padding:2px 6px; font-size:10px; font-weight:600; border-radius:10px; }
+        .rm-settings { padding:12px 16px 4px; border-bottom:1px solid #f3f4f6; }
+        .rm-settings[hidden] { display:none; }
+        .rm-settings-group { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
+        .rm-settings-label { font-size:11px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:0.05em; }
+        .rm-settings-options { display:flex; flex-wrap:wrap; gap:6px; }
         .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; }

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

@@ -12,14 +12,17 @@
       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 } };
+      // Size: default (40px), compact (36px), slim (32px)
+      const sizeMap = { "default": { dim: 40, icon: 18 }, compact: { dim: 36, icon: 16 }, slim: { dim: 32, icon: 16 } };
       const fabSize = sizeMap[this.size] || sizeMap["default"];
 
-      // Panel offset matches FAB position
+      const controlSize = 32;
+      const controlGap = 8;
+      const controlStart = this.fabVisible ? fabSize.dim + controlGap + 24 : 24;
       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 settingsToggleStyle = isRight ? `${isTop ? 'top' : 'bottom'}:24px;right:${controlStart}px;` : `${isTop ? 'top' : 'bottom'}:24px;left:${controlStart}px;`;
+      const panelToggleStyle = isRight ? `${isTop ? 'top' : 'bottom'}:24px;right:${controlStart + controlSize + controlGap}px;` : `${isTop ? 'top' : 'bottom'}:24px;left:${controlStart + controlSize + controlGap}px;`;
       const panelStyle = isRight
         ? `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;right:24px;`
         : `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;left:24px;`;
@@ -30,10 +33,13 @@
       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-toolbar-settings" id="rm-settings-toggle" style="${settingsToggleStyle}" title="Toolbar settings" aria-label="Toolbar settings" aria-expanded="false" aria-controls="rm-settings-panel">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm8.94 3.06l-1.3-.75.08-1.36a1 1 0 00-.3-.79l-1.72-1.72a1 1 0 00-.79-.3l-1.36.08-.75-1.3a1 1 0 00-.86-.5h-2.44a1 1 0 00-.86.5l-.75 1.3-1.36-.08a1 1 0 00-.79.3L4.58 8.86a1 1 0 00-.3.79l.08 1.36-1.3.75a1 1 0 00-.5.86v2.44a1 1 0 00.5.86l1.3.75-.08 1.36a1 1 0 00.3.79l1.72 1.72a1 1 0 00.79.3l1.36-.08.75 1.3a1 1 0 00.86.5h2.44a1 1 0 00.86-.5l.75-1.3 1.36.08a1 1 0 00.79-.3l1.72-1.72a1 1 0 00.3-.79l-.08-1.36 1.3-.75a1 1 0 00.5-.86v-2.44a1 1 0 00-.5-.86zm-2.24 1.44l-1.14.66a1 1 0 00-.5.86l.08 1.2-.98.98-1.2-.08a1 1 0 00-.86.5l-.66 1.14h-1.96l-.66-1.14a1 1 0 00-.86-.5l-1.2.08-.98-.98.08-1.2a1 1 0 00-.5-.86l-1.14-.66v-1.96l1.14-.66a1 1 0 00.5-.86l-.08-1.2.98-.98 1.2.08a1 1 0 00.86-.5l.66-1.14h1.96l.66 1.14a1 1 0 00.86.5l1.2-.08.98.98-.08 1.2a1 1 0 00.5.86l1.14.66v1.96z"/></svg>
         </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>
+          <span class="rm-panel-toggle-badge" id="rm-panel-toggle-badge"></span>
         </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">
@@ -61,9 +67,14 @@
               <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 class="rm-panel-header-actions">
+              <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>
+          <div class="rm-settings" id="rm-settings-panel" hidden>
+            ${this._toolbarSettingsMarkup()}
           </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>

data/app/assets/javascripts/rails_markup/toolbar/40-events.js

@@ -4,6 +4,7 @@
       document.getElementById("rm-fab").addEventListener("click", () => self.toggleMode());
       document.getElementById("rm-panel-toggle").addEventListener("click", () => self.togglePanel());
       document.getElementById("rm-panel-close").addEventListener("click", () => self.togglePanel());
+      document.getElementById("rm-settings-toggle").addEventListener("click", () => self._toggleSettings());
       document.getElementById("rm-btn-cancel").addEventListener("click", () => self._closePopup());
       document.getElementById("rm-btn-submit").addEventListener("click", (e) => self.submitAnnotation(e));
       document.getElementById("rm-popup-input").addEventListener("input", () => self._updateCharCount());
@@ -15,6 +16,13 @@
       // Custom menus (intent/severity/status) — button+menu, never native selects
       // so host FormSelect/Select2 enhancers cannot rewrite our DOM (#4).
       this.root.addEventListener("click", (e) => {
+        const setting = e.target.closest("[data-setting]");
+        if (setting) {
+          e.preventDefault();
+          e.stopPropagation();
+          this._setToolbarSetting(setting.dataset.setting, setting.dataset.value);
+          return;
+        }
         const option = e.target.closest(".rm-menu-option");
         if (option) {
           e.preventDefault();
@@ -147,10 +155,6 @@
       this.active = !this.active;
       if (this.active) {
         this._activateMode();
-        // Always open panel when activating annotation mode
-        if (document.getElementById("rm-panel").style.display !== "flex") {
-          this.togglePanel();
-        }
       } else {
         this._deactivateMode();
       }
@@ -161,7 +165,7 @@
       const iconSize = this._fabIconSize();
       fab.style.transform = "scale(0.9)";
       fab.style.boxShadow = `0 0 0 3px ${this._accentBg()}, 0 0 0 6px rgba(99,102,241,0.2)`;
-      fab.innerHTML = `<svg viewBox="0 0 24 24" style="width:${iconSize}px;height:${iconSize}px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"><path d="M6 18L18 6M6 6l12 12"/></svg><span class="rm-fab-badge" id="rm-fab-badge">${document.getElementById("rm-fab-badge")?.textContent || ""}</span>`;
+      fab.innerHTML = `<svg viewBox="0 0 24 24" style="width:${iconSize}px;height:${iconSize}px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"><path d="M6 18L18 6M6 6l12 12"/></svg>`;
       document.addEventListener("mousemove", this._boundMouseMove, true);
       document.addEventListener("mousedown", this._boundMouseDown, true);
       document.addEventListener("mouseup", this._boundMouseUp, true);
@@ -177,7 +181,7 @@
         const iconSize = this._fabIconSize();
         fab.style.transform = "";
         fab.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
-        fab.innerHTML = `<svg viewBox="0 0 24 24" style="width:${iconSize}px;height:${iconSize}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">${this.annotations.length || ""}</span>`;
+        fab.innerHTML = `<svg viewBox="0 0 24 24" style="width:${iconSize}px;height:${iconSize}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>`;
         this._updateCount();
       }
       document.removeEventListener("mousemove", this._boundMouseMove, true);

data/app/assets/javascripts/rails_markup/toolbar/50-sync.js

@@ -3,8 +3,41 @@
       const endpoint = (this.endpoint || "/feedback/api").replace(/\/+$/, "") || "/";
       return `rm-annotations:${encodeURIComponent(endpoint)}`;
     },
+    _toolbarSettingsKey() {
+      const endpoint = (this.endpoint || "/feedback/api").replace(/\/+$/, "") || "/";
+      return `rm-toolbar-settings:${encodeURIComponent(endpoint)}`;
+    },
     _pageUrl() { return window.location.pathname + window.location.search; },
     _pageStorageKey() { return this._storageKey() + ":" + this._pageUrl(); },
+    _normalizeToolbarSettings(candidate = {}) {
+      const source = candidate && typeof candidate === "object" && !Array.isArray(candidate) ? candidate : {};
+      const normalized = {};
+      if (this._validToolbarAccent(source.accent)) normalized.accent = source.accent;
+      if (this._validToolbarPosition(source.position)) normalized.position = source.position;
+      if (this._validToolbarSize(source.size)) normalized.size = source.size;
+      if (typeof source.fabVisible === "boolean") normalized.fabVisible = source.fabVisible;
+      if (typeof source.enableScreenshots === "boolean") normalized.enableScreenshots = source.enableScreenshots;
+      return normalized;
+    },
+    _loadToolbarSettings() {
+      try {
+        const raw = localStorage.getItem(this._toolbarSettingsKey());
+        if (!raw) return {};
+        return this._normalizeToolbarSettings(JSON.parse(raw));
+      } catch (e) {
+        console.warn("[rails-markup] settings load failed:", e);
+        return {};
+      }
+    },
+    _saveToolbarSettings(settings = this.toolbarSettings || {}) {
+      try {
+        localStorage.setItem(this._toolbarSettingsKey(), JSON.stringify(this._normalizeToolbarSettings(settings)));
+        return true;
+      } catch (e) {
+        console.warn("[rails-markup] settings save failed:", e);
+        return false;
+      }
+    },
     _saveToStorage() {
       try {
         // Cross-tab storage-event merging is deferred: safely reconciling ordered
@@ -72,6 +105,7 @@
       this.outbox = snapshot.outbox;
       this.nextId = snapshot.nextId;
       this.legacyMigrations = snapshot.legacyMigrations;
+      this.toolbarSettings = snapshot.toolbarSettings || {};
       this._storageError = "Changes could not be saved in this browser. Free storage space and try again.";
       this._renderPins();
       this._rebuildList();
@@ -87,7 +121,8 @@
         annotations: this.annotations,
         outbox: this.outbox,
         nextId: this.nextId,
-        legacyMigrations: this.legacyMigrations
+        legacyMigrations: this.legacyMigrations,
+        toolbarSettings: this.toolbarSettings
       }));
     },
     _mergeDirtyFields(...collections) {

data/app/assets/javascripts/rails_markup/toolbar/60-render.js

@@ -329,7 +329,7 @@
       const count = this.annotations.length;
       const countEl = document.getElementById("rm-panel-count");
       if (countEl) countEl.textContent = count;
-      const badge = document.getElementById("rm-fab-badge");
+      const badge = document.getElementById("rm-panel-toggle-badge");
       if (badge) {
         if (count > 0) { badge.textContent = count; badge.style.display = "flex"; }
         else { badge.style.display = "none"; }
@@ -419,6 +419,119 @@
       }
       if (text) text.textContent = this.serverOnline ? "Connected" : (this._syncUnavailable || "Offline");
     },
+    _validToolbarAccent(value) {
+      return ["indigo", "amber", "blue", "emerald", "rose"].includes(value);
+    },
+    _validToolbarPosition(value) {
+      return ["bl", "br", "tl", "tr"].includes(value);
+    },
+    _validToolbarSize(value) {
+      return ["slim", "compact", "default"].includes(value);
+    },
+    _toolbarSettingOptions(setting) {
+      switch (setting) {
+      case "accent":
+        return [
+          ["indigo", "Indigo"],
+          ["amber", "Amber"],
+          ["blue", "Blue"],
+          ["emerald", "Emerald"],
+          ["rose", "Rose"]
+        ];
+      case "position":
+        return [
+          ["bl", "Bottom-left"],
+          ["br", "Bottom-right"],
+          ["tl", "Top-left"],
+          ["tr", "Top-right"]
+        ];
+      case "size":
+        return [
+          ["default", "Default"],
+          ["compact", "Compact"],
+          ["slim", "Slim"]
+        ];
+      case "fabVisible":
+      case "enableScreenshots":
+        return [
+          [true, "On"],
+          [false, "Off"]
+        ];
+      default:
+        return [];
+      }
+    },
+    _toolbarSettingLabel(setting) {
+      switch (setting) {
+      case "accent": return "Accent";
+      case "position": return "Position";
+      case "size": return "Size";
+      case "fabVisible": return "Show FAB";
+      case "enableScreenshots": return "Screenshots";
+      default: return setting;
+      }
+    },
+    _toolbarSettingCurrentValue(setting) {
+      switch (setting) {
+      case "accent": return this.accent;
+      case "position": return this.position;
+      case "size": return this.size;
+      case "fabVisible": return this.fabVisible;
+      case "enableScreenshots": return this.enableScreenshots;
+      default: return null;
+      }
+    },
+    _toolbarSettingDisplayValue(value) {
+      return value === true ? "true" : value === false ? "false" : String(value);
+    },
+    _toolbarSettingsMarkup() {
+      return [
+        "accent",
+        "position",
+        "size",
+        "fabVisible",
+        "enableScreenshots"
+      ].map(setting => this._toolbarSettingsRowMarkup(setting)).join("");
+    },
+    _toolbarSettingsRowMarkup(setting) {
+      const current = this._toolbarSettingCurrentValue(setting);
+      const options = this._toolbarSettingOptions(setting);
+      const buttons = options.map(([value, label]) => {
+        const active = String(value) === String(current);
+        const valueAttr = this._toolbarSettingDisplayValue(value);
+        return `<button type="button" class="rm-chip${active ? " rm-chip-active" : " rm-chip-inactive"} rm-setting-chip" data-setting="${setting}" data-value="${this._esc(valueAttr)}"${active ? ` style="background:${this._accentBg()}"` : ""}>${this._esc(label)}</button>`;
+      }).join("");
+      return `
+        <div class="rm-settings-group">
+          <div class="rm-settings-label">${this._esc(this._toolbarSettingLabel(setting))}</div>
+          <div class="rm-settings-options">${buttons}</div>
+        </div>
+      `;
+    },
+    _toolbarSettingValue(setting, rawValue) {
+      if (setting === "fabVisible" || setting === "enableScreenshots") {
+        return rawValue === true || rawValue === "true";
+      }
+      return String(rawValue || "");
+    },
+    _setToolbarSetting(setting, rawValue) {
+      const value = this._toolbarSettingValue(setting, rawValue);
+      const next = Object.assign({}, this.toolbarSettings, { [setting]: value });
+      const normalized = this._normalizeToolbarSettings(next);
+      if (JSON.stringify(normalized) === JSON.stringify(this.toolbarSettings)) return;
+      if (!this._saveToolbarSettings(normalized)) return;
+      this.toolbarSettings = normalized;
+      this.destroy();
+      this.init(this._bootstrapOptions || {});
+    },
+    _toggleSettings() {
+      const panel = document.getElementById("rm-settings-panel");
+      const toggle = document.getElementById("rm-settings-toggle");
+      if (!panel) return;
+      panel.hidden = !panel.hidden;
+      this._settingsPanelOpen = !panel.hidden;
+      if (toggle) toggle.setAttribute("aria-expanded", String(!panel.hidden));
+    },
     async _captureElement(element) {
       try {
         const rect = element.getBoundingClientRect();

data/app/assets/javascripts/rails_markup/toolbar/90-init.js

@@ -3,12 +3,21 @@
       const previousPathname = this._currentPathname;
       const previousPageUrl = this._currentPageUrl;
       const currentPageUrl = this._pageUrl();
+      this._bootstrapOptions = Object.assign({}, opts);
       this.endpoint = opts.endpoint || "/feedback/api";
-      this.accent = opts.accent || "indigo";
-      this.position = opts.position || "bl";
-      this.size = opts.size || "default";
-      this.fabVisible = opts.fabVisible !== false;
-      this.enableScreenshots = opts.enableScreenshots !== false;
+      const savedSettings = this._loadToolbarSettings();
+      this.toolbarSettings = this._normalizeToolbarSettings({
+        accent: savedSettings.accent || opts.accent || "indigo",
+        position: savedSettings.position || opts.position || "bl",
+        size: savedSettings.size || opts.size || "default",
+        fabVisible: savedSettings.fabVisible != null ? savedSettings.fabVisible : (opts.fabVisible !== false),
+        enableScreenshots: savedSettings.enableScreenshots != null ? savedSettings.enableScreenshots : (opts.enableScreenshots !== false)
+      });
+      this.accent = this.toolbarSettings.accent || "indigo";
+      this.position = this.toolbarSettings.position || "bl";
+      this.size = this.toolbarSettings.size || "default";
+      this.fabVisible = this.toolbarSettings.fabVisible !== false;
+      this.enableScreenshots = this.toolbarSettings.enableScreenshots !== false;
       this.legacyStorageEndpoint = opts.legacyStorageEndpoint || this.legacyStorageEndpoint;
       this.healthIntervalMs = (opts.healthInterval || 60) * 1000;
 
@@ -84,6 +93,7 @@
       if (pins) pins.remove();
       const styles = document.getElementById("rm-toolbar-styles");
       if (styles) styles.remove();
+      this._settingsPanelOpen = false;
     },
   });
 

data/app/views/layouts/rails_markup/application.html.erb

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <%= csrf_meta_tags %>
   <title><%= content_for?(:title) ? "#{yield(:title)} — Rails Markup" : "Rails Markup" %></title>
   <style>
     /* Reset */

data/app/views/rails_markup/dashboard/show.html.erb

@@ -5,7 +5,7 @@
 <turbo-frame id="detail-panel">
 <div class="rm-detail">
   <%# Close button %>
-  <button type="button" class="rm-back" onclick="var f=this.closest('turbo-frame'); f.innerHTML=''; f.classList.add('rm-panel-empty'); document.querySelectorAll('.rm-card-active').forEach(c => c.classList.remove('rm-card-active'));">&#10005; Close</button>
+  <button type="button" class="rm-back" onclick="var f=this.closest('turbo-frame'); if (this.closest('.rm-layout')) { f.innerHTML=''; f.classList.add('rm-panel-empty'); document.querySelectorAll('.rm-card-active').forEach(c => c.classList.remove('rm-card-active')); } else { window.location.href='<%= j(rails_markup.root_path) %>'; }">&#10005; Close</button>
 
   <%# Header badges %>
   <div class="rm-detail-header">

data/lib/generators/rails_markup/install/templates/initializer.rb.erb

@@ -31,7 +31,7 @@ RailsMarkup.configure do |config|
   # "tl" (top-left), "tr" (top-right). Default: "bl"
   # config.toolbar_position = "bl"
 
-  # FAB button size: "default" (48px), "compact" (40px), "slim" (32px)
+  # FAB button size: "default" (40px), "compact" (36px), "slim" (32px)
   # config.toolbar_size = "default"
 
   # "Back to app" link in the dashboard header.

data/lib/rails_markup/cli/setup_wizard.rb

@@ -31,7 +31,7 @@ module RailsMarkup
           title: "Toolbar Size",
           type: :select,
           options: %w[slim compact default],
-          labels: { "slim" => "Slim (32px)", "compact" => "Compact (40px)", "default" => "Default (48px)" }
+          labels: { "slim" => "Slim (32px)", "compact" => "Compact (36px)", "default" => "Default (40px)" }
         },
         fab: {
           title: "Show Floating Button",

data/lib/rails_markup/configuration.rb

@@ -73,7 +73,7 @@ module RailsMarkup
     # "tl" (top-left), "tr" (top-right). Default: "bl"
     attr_reader :toolbar_position
 
-    # FAB button size: "default" (48px), "compact" (40px), "slim" (32px).
+    # FAB button size: "default" (40px), "compact" (36px), "slim" (32px).
     # Default: "default"
     attr_reader :toolbar_size
 

data/lib/rails_markup/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsMarkup
-  VERSION = "1.4.5"
+  VERSION = "1.4.6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-markup
 version: !ruby/object:Gem::Version
-  version: 1.4.5
+  version: 1.4.6
 platform: ruby
 authors:
 - InventList