web-mojo 2.6.4 → 2.7.0

package/dist/web-mojo.lite.iife.js

@@ -4693,6 +4693,7 @@ var MOJO = (function(exports) {
       this.template = opts.template || opts.templateUrl || "";
       this.data = opts.data ?? {};
       this.isRendering = false;
+      this._renderQueued = false;
       this.lastRenderTime = 0;
       this.mounted = false;
       this.debug = opts.debug ?? false;
@@ -4854,6 +4855,11 @@ var MOJO = (function(exports) {
     // ---------------------------------------------
     async render(allowMount = true, container = null) {
       const now = Date.now();
+      if (this.isRendering) {
+        this._renderQueued = true;
+        this._renderQueuedArgs = { allowMount, container };
+        return this;
+      }
       if (!this.canRender()) {
         return this;
       }
@@ -4879,6 +4885,12 @@ var MOJO = (function(exports) {
       } finally {
         this.isRendering = false;
       }
+      if (this._renderQueued) {
+        this._renderQueued = false;
+        const queued = this._renderQueuedArgs || { allowMount: true, container: null };
+        this._renderQueuedArgs = null;
+        await this.render(queued.allowMount, queued.container);
+      }
       return this;
     }
     async _renderChildren() {
@@ -5262,9 +5274,7 @@ var MOJO = (function(exports) {
      */
     escapeHtml(str) {
       if (typeof str !== "string") return str;
-      const div = document.createElement("div");
-      div.textContent = str;
-      return div.innerHTML;
+      return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
     }
     contains(el) {
       if (typeof el === "string") {
@@ -5654,19 +5664,19 @@ var MOJO = (function(exports) {
       if (menuItems.length === 0) {
         return this.closeButton ? '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' : "";
       }
-      const triggerIcon = this.contextMenu.icon || "bi-three-dots-vertical";
-      const buttonClass = this.contextMenu.buttonClass || "btn btn-link p-1 mojo-modal-context-menu-btn";
+      const triggerIcon = this.escapeHtml(this.contextMenu.icon || "bi-three-dots-vertical");
+      const buttonClass = this.escapeHtml(this.contextMenu.buttonClass || "btn btn-link p-1 mojo-modal-context-menu-btn");
       const menuItemsHtml = menuItems.map((item) => {
         if (item.type === "divider") {
           return '<li><hr class="dropdown-divider"></li>';
         }
-        const icon = item.icon ? `<i class="${item.icon} me-2"></i>` : "";
-        const label = item.label || "";
+        const icon = item.icon ? `<i class="${this.escapeHtml(item.icon)} me-2"></i>` : "";
+        const label = this.escapeHtml(item.label || "");
         if (item.href) {
-          return `<li><a class="dropdown-item" href="${item.href}"${item.target ? ` target="${item.target}"` : ""}>${icon}${label}</a></li>`;
+          return `<li><a class="dropdown-item" href="${this.escapeHtml(item.href)}"${item.target ? ` target="${this.escapeHtml(item.target)}"` : ""}>${icon}${label}</a></li>`;
         } else if (item.action) {
-          const dataAttrs = Object.keys(item).filter((key) => key.startsWith("data-")).map((key) => `${key}="${item[key]}"`).join(" ");
-          return `<li><a class="dropdown-item" data-action="${item.action}" ${dataAttrs}>${icon}${label}</a></li>`;
+          const dataAttrs = Object.keys(item).filter((key) => key.startsWith("data-")).map((key) => `${key}="${this.escapeHtml(item[key])}"`).join(" ");
+          return `<li><a class="dropdown-item" data-action="${this.escapeHtml(item.action)}" ${dataAttrs}>${icon}${label}</a></li>`;
         }
         return "";
       }).join("");
@@ -14555,9 +14565,7 @@ var MOJO = (function(exports) {
      */
     escapeHtml(str) {
       if (str == null) return "";
-      const div = document.createElement("div");
-      div.textContent = String(str);
-      return div.innerHTML;
+      return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
     }
     /**
      * Render a tooltip icon for a field
@@ -15282,9 +15290,7 @@ var MOJO = (function(exports) {
      */
     escapeHtml(str) {
       if (str == null) return "";
-      const div = document.createElement("div");
-      div.textContent = String(str);
-      return div.innerHTML;
+      return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
     }
     /**
      * Get form value (for integration with forms)
@@ -20372,9 +20378,7 @@ var MOJO = (function(exports) {
      */
     escapeHtml(str) {
       if (str == null) return "";
-      const div = document.createElement("div");
-      div.textContent = String(str);
-      return div.innerHTML;
+      return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
     }
     /**
      * Escape regex special characters
@@ -23331,6 +23335,7 @@ var MOJO = (function(exports) {
       this._toolbarRightMounted = false;
       this.dayRangeFilter = this._normalizeDayRangeFilter(options.dayRangeFilter);
       this.dayRangeControl = null;
+      this.filterPresets = this._normalizeFilterPresets(options.filterPresets);
       this.exportOptions = options.exportOptions || null;
       this.exportSource = options.exportSource || "remote";
       this.persistSelection = options.persistSelection === void 0 ? this.paginationMode === "more" : options.persistSelection === true;
@@ -23352,6 +23357,17 @@ var MOJO = (function(exports) {
       this.groupHeaderStyle = ListView.GROUP_HEADER_STYLES.includes(options.groupHeaderStyle) ? options.groupHeaderStyle : "banner";
       this.groupHeaderViews = /* @__PURE__ */ new Map();
       this._renderOrder = [];
+      this.emptyState = this._normalizeEmptyState(options.emptyState);
+      this.loadingStyle = options.loadingStyle === "spinner" || options.loadingStyle === "default" ? "spinner" : "skeleton";
+      this.showResultCount = options.showResultCount === true;
+      this._autoRefreshMs = this._normalizeAutoRefresh(options.autoRefresh);
+      this._autoRefreshTimer = null;
+      this._autoRefreshPaused = false;
+      this._autoRefreshHandlers = null;
+      this.autoRefreshIndicator = options.autoRefreshIndicator !== false;
+      this._autoRefreshPulseTimer = null;
+      this.persistState = options.persistState === true;
+      this.persistKey = options.persistKey || null;
       this.loadingMore = false;
       if (this._isToolbarEnabled() || this.paginationMode !== "none") {
         this.template = this.buildListTemplate();
@@ -23363,7 +23379,12 @@ var MOJO = (function(exports) {
     // Lifecycle
     // ============================================================
     async onInit() {
+      const queryKeys = this.persistState && this.options.collection && this.options.collection.params ? Object.keys(this.options.collection.params) : [];
       this._initCollection(this.options.collection || this.options.Collection);
+      if (this.persistState) {
+        this._restorePersistedState(queryKeys);
+        this.on("params-changed", () => this._savePersistedState());
+      }
       if (this.dayRangeFilter) {
         this._seedDayRangeParams();
         this.dayRangeControl = new SegmentControl({
@@ -23381,10 +23402,17 @@ var MOJO = (function(exports) {
       if (this.collection && (this.options.fetchOnMount || !this.collection.lastFetchTime)) {
         this.collection.fetch();
       }
+      this._startAutoRefresh();
+    }
+    async onBeforeUnmount() {
+      await super.onBeforeUnmount();
+      this._stopAutoRefresh();
     }
     async onBeforeRender() {
       this.searchValue = this.getActiveFilters().search || "";
       this.hasMore = this._computeHasMore();
+      this.skeletonHtml = this.loadingStyle === "skeleton" && this.loading ? this._buildSkeletonHtml() : "";
+      this.emptyStateHtml = this.emptyState && this.isEmpty && !this.loading ? this._buildEmptyStateHtml() : "";
     }
     async onAfterRender() {
       await super.onAfterRender();
@@ -23414,6 +23442,7 @@ var MOJO = (function(exports) {
       }
       if (this._isToolbarEnabled()) {
         this.updateFilterPills();
+        this.renderFilterPresets();
         this.setupSearchClearListener();
       }
     }
@@ -23428,20 +23457,21 @@ var MOJO = (function(exports) {
      */
     _defaultBareTemplate() {
       return `
+      ${this._hasFeedbackFeature() ? this._buildFeedbackStyles() : ""}
       <div class="list-view-container">
         {{#loading}}
-          <div class="list-loading">
+          ${this._loadingContent(`<div class="list-loading">
             <div class="spinner-border spinner-border-sm" role="status">
               <span class="visually-hidden">Loading...</span>
             </div>
             Loading...
-          </div>
+          </div>`)}
         {{/loading}}
         {{^loading}}
           {{#isEmpty}}
-            <div class="list-empty">
+            ${this._emptyContent(`<div class="list-empty">
               {{emptyMessage}}
-            </div>
+            </div>`)}
           {{/isEmpty}}
           {{^isEmpty}}
             <div class="list-items" data-container="items"></div>
@@ -23465,21 +23495,22 @@ var MOJO = (function(exports) {
       const pagination = this.paginationMode === "pages" ? this.buildPaginationTemplate() : "";
       return `
       <div class="list-view-wrapper">
+        ${this._hasFeedbackFeature() ? this._buildFeedbackStyles() : ""}
         ${toolbar}
         <div class="list-view-container">
           {{#loading}}
-            <div class="list-loading text-center py-4">
+            ${this._loadingContent(`<div class="list-loading text-center py-4">
               <div class="spinner-border spinner-border-sm" role="status">
                 <span class="visually-hidden">Loading...</span>
               </div>
               Loading...
-            </div>
+            </div>`)}
           {{/loading}}
           {{^loading}}
             {{#isEmpty}}
-              <div class="list-empty text-center py-4 text-muted">
+              ${this._emptyContent(`<div class="list-empty text-center py-4 text-muted">
                 {{emptyMessage}}
-              </div>
+              </div>`)}
             {{/isEmpty}}
             {{^isEmpty}}
               <div class="list-items" data-container="items"></div>
@@ -23496,7 +23527,16 @@ var MOJO = (function(exports) {
      * @private
      */
     _isToolbarEnabled() {
-      return !!(this.title || this.eyebrow || this.searchable || this.filterable && this._hasAnyFilters() || this.sortOptions && this.sortOptions.length > 0 || this.toolbarRight || this.dayRangeFilter || this.toolbarButtons && this.toolbarButtons.length > 0 || this.options.showAdd || this.options.showExport);
+      return !!(this.title || this.eyebrow || this.searchable || this.filterable && this._hasAnyFilters() || this.sortOptions && this.sortOptions.length > 0 || this.toolbarRight || this.dayRangeFilter || this.filterPresets && this.filterPresets.length > 0 || this.toolbarButtons && this.toolbarButtons.length > 0 || this._autoRefreshIndicatorEnabled() || this.options.showAdd || this.options.showExport);
+    }
+    /**
+     * @returns {boolean} true when the auto-refresh toolbar indicator should
+     * render — auto-refresh is active and it wasn't opted out. Gates both the
+     * toolbar slot and its style block (off → zero markup, byte-identical).
+     * @private
+     */
+    _autoRefreshIndicatorEnabled() {
+      return this._autoRefreshMs > 0 && this.autoRefreshIndicator !== false;
     }
     _hasAnyFilters() {
       return this.filters && Object.keys(this.filters).length > 0 || this.additionalFilters && this.additionalFilters.length > 0;
@@ -23511,22 +23551,35 @@ var MOJO = (function(exports) {
       const rightSlot = this.toolbarRight ? `<div data-container="toolbar-right"></div>` : "";
       const dayRangeSlot = this.dayRangeFilter ? `<div data-container="toolbar-day-range"></div>` : "";
       const sortDropdown = this.sortOptions && this.sortOptions.length > 0 ? this.buildSortDropdownTemplate() : "";
+      const hasPresets = this.filterPresets && this.filterPresets.length > 0;
+      const presetsInline = hasPresets && this._presetsInline();
+      const presetInlineSlot = presetsInline ? `<div data-container="filter-presets" class="preset-segment-slot"></div>` : "";
+      const presetRowSlot = hasPresets && !presetsInline ? `<div data-container="filter-presets" class="preset-scroll mt-3"></div>` : "";
+      const presetStyle = hasPresets ? this._buildPresetStyle() : "";
+      const showIndicator = this._autoRefreshIndicatorEnabled();
+      const indicatorSlot = showIndicator ? this._buildAutoRefreshIndicatorSlot() : "";
+      const indicatorStyle = showIndicator ? this._buildAutoRefreshIndicatorStyle() : "";
       const rightGroup = `
       <div class="d-flex align-items-center gap-2 flex-wrap ${titleBlock ? "ms-auto" : ""}">
         ${this.buildActionButtonsTemplate()}
+        ${indicatorSlot}
         ${sortDropdown}
         ${this.filterable ? this.buildFilterDropdownTemplate() : ""}
         ${this.searchable && this.searchPlacement === "toolbar" ? this.buildSearchTemplate() : ""}
+        ${presetInlineSlot}
         ${dayRangeSlot}
         ${rightSlot}
       </div>
     `;
       return `
       <div class="table-action-buttons mb-3">
+        ${presetStyle}
+        ${indicatorStyle}
         <div class="d-flex align-items-center gap-3 flex-wrap">
           ${titleBlock}
           ${rightGroup}
         </div>
+        ${presetRowSlot}
         <div data-container="filter-pills"></div>
       </div>
     `;
@@ -23747,7 +23800,10 @@ var MOJO = (function(exports) {
     `;
     }
     buildActivePills() {
-      if (this.hideActivePills) return "";
+      const countHtml = this.showResultCount ? this._buildResultCountSummary() : "";
+      if (this.hideActivePills) {
+        return countHtml ? this._wrapPillRow(countHtml) : "";
+      }
       const activeFilters = this.getActiveFilters();
       const hasSearch = activeFilters.search && activeFilters.search.toString().trim() !== "";
       let filterEntries = Object.entries(activeFilters).filter(
@@ -23756,7 +23812,9 @@ var MOJO = (function(exports) {
       if (this.hideActivePillNames && this.hideActivePillNames.length > 0) {
         filterEntries = filterEntries.filter(([key]) => !this.hideActivePillNames.includes(key));
       }
-      if (filterEntries.length === 0 && !hasSearch) return "";
+      if (filterEntries.length === 0 && !hasSearch) {
+        return countHtml ? this._wrapPillRow(countHtml) : "";
+      }
       const pills = filterEntries.map(([paramKey, value]) => {
         const { field } = parseFilterKey(paramKey);
         const label = this.getFilterLabel(field);
@@ -23795,13 +23853,30 @@ var MOJO = (function(exports) {
       <div class="row mt-2">
         <div class="col-12">
           <div class="d-flex flex-wrap align-items-center">
-            ${pills}
+            ${countHtml}${pills}
             ${clearAllButton}
           </div>
         </div>
       </div>
     `;
     }
+    /**
+     * Wrap arbitrary inner markup in the standard active-pills row shell. Used
+     * for the count-only case (WM-033) where the result-count summary renders
+     * without any filter pills.
+     * @private
+     */
+    _wrapPillRow(inner) {
+      return `
+      <div class="row mt-2">
+        <div class="col-12">
+          <div class="d-flex flex-wrap align-items-center">
+            ${inner}
+          </div>
+        </div>
+      </div>
+    `;
+    }
     buildPaginationTemplate() {
       return `
       <div class="table-status-bar mt-3">
@@ -23848,6 +23923,215 @@ var MOJO = (function(exports) {
     `;
     }
     // ============================================================
+    // Feedback states (WM-033) — rich empty, skeletons, result count
+    // ============================================================
+    /**
+     * Normalize the `emptyState:` option into `{ icon, title, message, action }`
+     * or null when absent. `action` is `{ label, action, icon }` where `action`
+     * is a kebab-case `data-action` name (routed like any toolbar action, e.g.
+     * `'add'` → onActionAdd). Returns null for a non-object so the feature stays
+     * inert and `emptyMessage` remains the fallback.
+     * @private
+     */
+    _normalizeEmptyState(raw) {
+      if (!raw || typeof raw !== "object") return null;
+      let action = null;
+      if (raw.action && typeof raw.action === "object" && raw.action.action) {
+        action = {
+          label: raw.action.label || "Action",
+          action: raw.action.action,
+          icon: raw.action.icon || null
+        };
+      }
+      return {
+        icon: raw.icon || "inbox",
+        title: raw.title || null,
+        message: raw.message || null,
+        action
+      };
+    }
+    /**
+     * True when any of the three opt-in feedback features is enabled. Gates the
+     * one-time `<style>` block emission so opt-out pages carry zero extra CSS.
+     * @private
+     */
+    _hasFeedbackFeature() {
+      return !!this.emptyState || this.loadingStyle === "skeleton" || this.showResultCount;
+    }
+    /**
+     * Loading-block content for the body template. Returns the unescaped
+     * skeleton slot when `loadingStyle: 'skeleton'`, otherwise the caller's
+     * default spinner markup verbatim (byte-identical opt-out).
+     * @private
+     */
+    _loadingContent(defaultMarkup) {
+      return this.loadingStyle === "skeleton" ? "{{{skeletonHtml}}}" : defaultMarkup;
+    }
+    /**
+     * Empty-block content for the body template. Returns the unescaped rich
+     * empty-state slot when `emptyState` is configured, otherwise the caller's
+     * default `emptyMessage` markup verbatim (byte-identical opt-out).
+     * @private
+     */
+    _emptyContent(defaultMarkup) {
+      return this.emptyState ? "{{{emptyStateHtml}}}" : defaultMarkup;
+    }
+    /**
+     * Skeleton row count: `collection.params.size` capped at 8, defaulting to 5
+     * when size isn't set. Shared by the ListView (card) and TableView (row)
+     * skeleton builders.
+     * @private
+     */
+    _skeletonRowCount() {
+      const size = this.collection?.params?.size;
+      const n = typeof size === "number" && size > 0 ? size : 5;
+      return Math.min(n, 8);
+    }
+    /**
+     * ListView skeleton — stacked card silhouettes. TableView overrides this to
+     * emit a column-matched `<table>`. Called from onBeforeRender only while
+     * loading + `loadingStyle: 'skeleton'`.
+     * @private
+     */
+    _buildSkeletonHtml() {
+      const rows = this._skeletonRowCount();
+      let cards = "";
+      for (let i = 0; i < rows; i++) {
+        cards += '<div class="list-skeleton-card"><span class="skeleton-line w-40"></span><span class="skeleton-line w-90"></span><span class="skeleton-line w-60"></span></div>';
+      }
+      return `<div class="list-skeleton" aria-hidden="true">${cards}</div>`;
+    }
+    /**
+     * Build the rich empty-state panel. Branches on `getActiveFilters()`:
+     * non-empty → the filtered variant ("No results match your filters" +
+     * Clear filters button reusing onActionClearAllFilters); empty → the
+     * configured truly-empty content with its optional CTA. Search counts as
+     * an active filter. Returns '' when `emptyState` isn't configured.
+     * @private
+     */
+    _buildEmptyStateHtml() {
+      const es = this.emptyState;
+      if (!es) return "";
+      const activeCount = Object.keys(this.getActiveFilters()).length;
+      const isFiltered = activeCount > 0;
+      let icon;
+      let title;
+      let message;
+      let buttonHtml;
+      if (isFiltered) {
+        icon = "funnel";
+        title = "No results match your filters";
+        const plural = activeCount === 1 ? "filter" : "filters";
+        message = `No items match the ${activeCount} active ${plural}. Try widening or removing a filter.`;
+        buttonHtml = '<button class="btn btn-outline-primary" data-action="clear-all-filters"><i class="bi bi-x-circle me-1"></i>Clear filters</button>';
+      } else {
+        icon = es.icon || "inbox";
+        title = es.title || this.emptyMessage;
+        message = es.message || "";
+        if (es.action) {
+          const iconHtml = es.action.icon ? `<i class="bi ${this.escapeHtml(es.action.icon)} me-1"></i>` : "";
+          buttonHtml = `<button class="btn btn-primary" data-action="${this.escapeHtml(es.action.action)}">${iconHtml}${this.escapeHtml(es.action.label)}</button>`;
+        } else {
+          buttonHtml = "";
+        }
+      }
+      const titleHtml = title ? `<div class="empty-state-title h6">${this.escapeHtml(title)}</div>` : "";
+      const messageHtml = message ? `<p class="empty-state-message">${this.escapeHtml(message)}</p>` : "";
+      return `
+      <div class="table-empty-state">
+        <span class="empty-state-icon"><i class="bi bi-${this.escapeHtml(icon)}"></i></span>
+        ${titleHtml}
+        ${messageHtml}
+        ${buttonHtml}
+      </div>
+    `;
+    }
+    /**
+     * Build the "Showing N of M" result-count summary from `collection.meta`
+     * (`count`) and the current loaded length. Appends a "· filtered" marker
+     * when any filter is active. Returns '' when `showResultCount` is off or the
+     * total count isn't known yet. Rendered inside the filter-pills row by
+     * `buildActivePills`.
+     * @private
+     */
+    _buildResultCountSummary() {
+      if (!this.showResultCount || !this.collection) return "";
+      const meta = this.collection.meta || {};
+      const total = typeof meta.count === "number" ? meta.count : null;
+      if (total === null) return "";
+      const shown = this.collection.length();
+      const isFiltered = Object.keys(this.getActiveFilters()).length > 0;
+      const fmt = (n) => Number(n).toLocaleString();
+      const filteredSuffix = isFiltered ? ' <span class="count-filtered">· filtered</span>' : "";
+      return `<span class="result-count-summary me-2 mb-1">Showing <strong>${fmt(shown)}</strong> of <strong>${fmt(total)}</strong>${filteredSuffix}</span>`;
+    }
+    /**
+     * One-time `<style>` block for the three feedback features (skeleton
+     * shimmer, empty-state chip, result-count summary). Token-based so both
+     * themes track automatically; the shimmer's moving band is a component tint
+     * (black-on-light) with its rgba(255,255,255) dark companion, and the
+     * animation is disabled under prefers-reduced-motion. Emitted once per
+     * template, only when `_hasFeedbackFeature()`.
+     * @private
+     */
+    _buildFeedbackStyles() {
+      return `
+      <style>
+        .table-empty-state { text-align: center; padding: 3rem 1.5rem; }
+        .table-empty-state .empty-state-icon {
+          display: inline-flex; align-items: center; justify-content: center;
+          width: 4rem; height: 4rem; border-radius: 50%;
+          margin-bottom: 1rem; font-size: 1.75rem;
+          background: var(--bs-secondary-bg);
+          color: var(--bs-secondary-color);
+          border: 1px solid var(--bs-border-color);
+        }
+        .table-empty-state .empty-state-title {
+          font-weight: 600; color: var(--bs-emphasis-color); margin-bottom: 0.35rem;
+        }
+        .table-empty-state .empty-state-message {
+          color: var(--bs-secondary-color); max-width: 26rem; margin: 0 auto 1.25rem;
+        }
+
+        .skeleton-line {
+          display: block; height: 0.85rem; border-radius: 0.35rem;
+          background-color: var(--bs-secondary-bg);
+          background-image: linear-gradient(90deg,
+            rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0) 100%);
+          background-size: 200% 100%; background-repeat: no-repeat;
+          animation: mojo-skeleton-shimmer 1.4s ease-in-out infinite;
+        }
+        [data-bs-theme="dark"] .skeleton-line {
+          background-image: linear-gradient(90deg,
+            rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 100%);
+        }
+        .skeleton-line.w-90 { width: 90%; }
+        .skeleton-line.w-75 { width: 75%; }
+        .skeleton-line.w-60 { width: 60%; }
+        .skeleton-line.w-40 { width: 40%; }
+        .skeleton-line.w-25 { width: 25%; }
+        .skeleton-line.skeleton-pill { height: 1.35rem; width: 4rem; border-radius: 999px; }
+        .list-skeleton-card {
+          display: flex; flex-direction: column; gap: 0.5rem;
+          padding: 0.85rem 1rem; margin-bottom: 0.5rem;
+          border: 1px solid var(--bs-border-color-translucent);
+          border-radius: 0.5rem;
+        }
+        @keyframes mojo-skeleton-shimmer {
+          0% { background-position: 150% 0; }
+          100% { background-position: -50% 0; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .skeleton-line { animation: none; }
+        }
+
+        .result-count-summary { font-size: 0.8rem; color: var(--bs-secondary-color); }
+        .result-count-summary strong { color: var(--bs-emphasis-color); font-weight: 600; }
+        .result-count-summary .count-filtered { color: var(--bs-primary); }
+      </style>
+    `;
+    }
+    // ============================================================
     // Collection wiring (existing + persistSelection-aware)
     // ============================================================
     _initCollection(collectionOrClass) {
@@ -23942,6 +24226,325 @@ var MOJO = (function(exports) {
       if (!silent) this._onDayRangeChange({ value, previous });
       return true;
     }
+    // ============================================================
+    // Filter presets (compact joined btn-group segment)
+    //
+    // Author-defined "common queries" bundled behind a toolbar segment.
+    // Mutual-exclusion + toggle-off only; active state is derived from
+    // strict param matching against getActiveFilters(). The `'@me'` token
+    // in a preset's params resolves to the active user's id at apply AND
+    // match time (skipped when no active user).
+    // ============================================================
+    /**
+     * Normalize the `filterPresets:` option into a clean array of
+     * `{ key, label, icon, params, description }`. Drops entries without a
+     * `key`, warns on (and drops) duplicate keys. Returns `[]` when the
+     * option is absent / empty so the whole feature stays inert.
+     * @private
+     */
+    _normalizeFilterPresets(raw) {
+      if (!Array.isArray(raw) || raw.length === 0) return [];
+      const seen = /* @__PURE__ */ new Set();
+      const presets = [];
+      raw.forEach((p) => {
+        if (!p || !p.key) return;
+        if (seen.has(p.key)) {
+          console.warn(`ListView: duplicate filterPresets key '${p.key}' — ignoring the later one.`);
+          return;
+        }
+        seen.add(p.key);
+        presets.push({
+          key: p.key,
+          label: p.label || p.key,
+          icon: p.icon || null,
+          params: p.params && typeof p.params === "object" ? p.params : {},
+          description: p.description || null
+        });
+      });
+      return presets;
+    }
+    /**
+     * Placement branch: ≤4 presets render inline (sibling of the day-range
+     * segment); 5+ get their own scrollable row above the filter pills.
+     * @private
+     */
+    _presetsInline() {
+      return this.filterPresets.length <= 4;
+    }
+    _getPreset(key) {
+      return this.filterPresets.find((p) => p.key === key) || null;
+    }
+    /**
+     * Resolve a preset's raw params into concrete filter values. The `'@me'`
+     * token resolves to the active user's id; when no active user can be
+     * resolved that param is skipped (both at apply and match time so the
+     * derived active state stays consistent).
+     * @private
+     */
+    _resolvePresetParams(preset) {
+      const out = {};
+      const raw = preset?.params || {};
+      Object.keys(raw).forEach((key) => {
+        const value = raw[key];
+        if (value === "@me") {
+          const uid = this.getApp()?.activeUser?.id;
+          if (uid === void 0 || uid === null) return;
+          out[key] = uid;
+        } else {
+          out[key] = value;
+        }
+      });
+      return out;
+    }
+    /**
+     * A preset is active when every one of its resolved params strictly
+     * matches the current active filters. Matching goes through
+     * getActiveFilters() (not raw collection.params) so `__in` collapsing is
+     * honored. A preset whose params all resolve away (e.g. only `'@me'`
+     * with no active user) never matches.
+     * @private
+     */
+    _presetMatches(preset) {
+      const resolved = this._resolvePresetParams(preset);
+      const keys = Object.keys(resolved);
+      if (keys.length === 0) return false;
+      const active = this.getActiveFilters();
+      return keys.every((key) => {
+        const value = resolved[key];
+        if (Array.isArray(value)) {
+          if (value.length === 0) return true;
+          const { field } = parseFilterKey(key);
+          if (value.length === 1) {
+            return active[field] !== void 0 && String(active[field]) === String(value[0]);
+          }
+          const inVal = active[`${field}__in`];
+          return inVal !== void 0 && String(inVal) === value.join(",");
+        }
+        return active[key] !== void 0 && String(active[key]) === String(value);
+      });
+    }
+    /**
+     * Null out every resolved param key belonging to a preset (used by
+     * toggle-off and by mutual-exclusion when switching presets).
+     * @private
+     */
+    _clearPresetParams(preset) {
+      const resolved = this._resolvePresetParams(preset);
+      Object.keys(resolved).forEach((key) => this.setFilter(key, null));
+    }
+    /**
+     * Get the currently-active preset's full config object, or null. Active
+     * state is derived — no stored "active preset" field to drift.
+     *
+     * Most-specific-match-wins: when several presets match at once (e.g. one
+     * preset's params are a strict subset of another's — Errors `{level__gte:4}`
+     * ⊂ Auth `{path__icontains:'/auth', level__gte:4}`), the one with the MOST
+     * resolved param keys is returned so the correct (narrower) chip highlights
+     * and mutual-exclusion/toggle logic reads it. Ties resolve to the first
+     * matching preset in array order.
+     * @returns {object|null}
+     */
+    getActivePreset() {
+      if (!this.filterPresets || this.filterPresets.length === 0) return null;
+      let best = null;
+      let bestCount = -1;
+      for (const preset of this.filterPresets) {
+        if (!this._presetMatches(preset)) continue;
+        const count = Object.keys(this._resolvePresetParams(preset)).length;
+        if (count > bestCount) {
+          best = preset;
+          bestCount = count;
+        }
+      }
+      return best;
+    }
+    /**
+     * Apply a preset by key. Toggles off if it's already the active preset;
+     * otherwise clears the previously-active preset's params (mutual
+     * exclusion), applies the new bundle, refetches, and repaints.
+     * @param {string} key
+     * @returns {Promise<boolean>} false when the key is unknown.
+     */
+    async applyPreset(key) {
+      const preset = this._getPreset(key);
+      if (!preset) return false;
+      const active = this.getActivePreset();
+      if (active && active.key === preset.key) {
+        await this.clearPreset();
+        return true;
+      }
+      if (active) this._clearPresetParams(active);
+      const resolved = this._resolvePresetParams(preset);
+      Object.keys(resolved).forEach((k) => this.setFilter(k, resolved[k]));
+      await this.applyFilters();
+      this.renderFilterPresets();
+      this.emit("preset:change", { key: preset.key, params: resolved });
+      return true;
+    }
+    /**
+     * Clear the active preset (removes its params). No-op when nothing is
+     * active, but still repaints and emits `preset:change` with null.
+     * @returns {Promise<void>}
+     */
+    async clearPreset() {
+      const active = this.getActivePreset();
+      if (active) {
+        this._clearPresetParams(active);
+        await this.applyFilters();
+      }
+      this.renderFilterPresets();
+      this.emit("preset:change", null);
+    }
+    /**
+     * Toolbar action — apply/toggle a preset from its segment button.
+     */
+    async onActionApplyPreset(event, element) {
+      if (event && typeof event.preventDefault === "function") event.preventDefault();
+      const key = element?.getAttribute("data-preset-key");
+      if (!key) return;
+      await this.applyPreset(key);
+    }
+    /**
+     * Fill the `filter-presets` container with the joined segment, painting
+     * the derived-active button as `btn-primary`. innerHTML re-render pattern
+     * mirroring `updateFilterPills`. No-op when presets aren't configured or
+     * the container isn't in the DOM yet.
+     */
+    renderFilterPresets() {
+      if (!this.filterPresets || this.filterPresets.length === 0) return;
+      const container = this.element?.querySelector('[data-container="filter-presets"]');
+      if (!container) return;
+      container.innerHTML = this._buildPresetSegment();
+    }
+    /**
+     * Build the joined `btn-group btn-sm preset-segment` markup with the
+     * active button styled `btn-primary` (derived from param matching).
+     * @private
+     */
+    _buildPresetSegment() {
+      const active = this.getActivePreset();
+      const activeKey = active ? active.key : null;
+      const buttons = this.filterPresets.map((preset) => {
+        const isActive = preset.key === activeKey;
+        const cls = isActive ? "btn btn-primary" : "btn btn-outline-secondary";
+        const icon = preset.icon ? `<i class="bi ${this.escapeHtml(preset.icon)}"></i> ` : "";
+        const titleAttr = preset.description ? ` title="${this.escapeHtml(preset.description)}"` : "";
+        return `<button type="button"
+                      class="${cls}"
+                      data-action="apply-preset"
+                      data-preset-key="${this.escapeHtml(preset.key)}"
+                      aria-pressed="${isActive ? "true" : "false"}"${titleAttr}>${icon}${this.escapeHtml(preset.label)}</button>`;
+      }).join("");
+      return `<div class="btn-group btn-group-sm preset-segment" role="group" aria-label="Filter presets">${buttons}</div>`;
+    }
+    /**
+     * Inline `<style>` for the preset segment. Token-based (auto-tracks both
+     * themes); the single scrollbar-thumb literal carries its dark companion.
+     * Emitted once from the toolbar template (only when presets exist).
+     * @private
+     */
+    _buildPresetStyle() {
+      return `
+      <style>
+        .preset-segment .btn {
+          --bs-btn-padding-y: 0.25rem;
+          --bs-btn-padding-x: 0.6rem;
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .preset-segment .btn .bi { font-size: 0.8rem; }
+
+        /* Touch: bump the tap target only on coarse pointers — desktop stays compact. */
+        @media (pointer: coarse) {
+          .preset-segment .btn {
+            --bs-btn-padding-y: 0.5rem;
+            --bs-btn-padding-x: 0.85rem;
+          }
+        }
+
+        /* 5+ presets: own row, scroll horizontally instead of wrapping. */
+        .preset-scroll {
+          overflow-x: auto;
+          -webkit-overflow-scrolling: touch;
+          scrollbar-width: thin;
+          padding-bottom: 0.2rem;
+        }
+        .preset-scroll .btn-group { flex-wrap: nowrap; }
+        .preset-scroll .btn { white-space: nowrap; }
+        .preset-scroll::-webkit-scrollbar { height: 6px; }
+        .preset-scroll::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.15);
+          border-radius: 999px;
+        }
+        [data-bs-theme="dark"] .preset-scroll::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.12);
+        }
+      </style>
+    `;
+    }
+    /**
+     * Compact, quiet auto-refresh indicator for the toolbar right-group: a
+     * muted `bi-arrow-repeat` icon with no button chrome and no text label. The
+     * icon is `aria-hidden`; a visually-hidden span carries the text
+     * alternative for assistive tech. `_pulseAutoRefreshIndicator()` adds the
+     * `is-refreshing` class on each successful tick to fire a brief spin.
+     * @private
+     */
+    _buildAutoRefreshIndicatorSlot() {
+      const secs = Math.round(this._autoRefreshMs / 1e3);
+      const label = `Auto-refresh: ${secs}s`;
+      return `<span class="mojo-autorefresh-indicator" data-autorefresh-indicator title="${this.escapeHtml(label)}">
+              <i class="bi bi-arrow-repeat" aria-hidden="true"></i>
+              <span class="visually-hidden">${this.escapeHtml(label)}</span>
+            </span>`;
+    }
+    /**
+     * Inline `<style>` for the auto-refresh indicator. Muted via
+     * `--bs-secondary-color` (auto-tracks both themes — no literals). The spin
+     * animation only plays while `is-refreshing` is set and is suppressed under
+     * `prefers-reduced-motion`. Emitted once, only when the indicator renders.
+     * @private
+     */
+    _buildAutoRefreshIndicatorStyle() {
+      return `
+      <style>
+        .mojo-autorefresh-indicator {
+          display: inline-flex;
+          align-items: center;
+          color: var(--bs-secondary-color);
+          font-size: 0.9rem;
+          line-height: 1;
+        }
+        .mojo-autorefresh-indicator .bi { display: block; }
+        .mojo-autorefresh-indicator.is-refreshing .bi {
+          animation: mojo-autorefresh-spin 0.6s ease;
+        }
+        @keyframes mojo-autorefresh-spin {
+          from { transform: rotate(0deg); }
+          to   { transform: rotate(360deg); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .mojo-autorefresh-indicator.is-refreshing .bi { animation: none; }
+        }
+      </style>
+    `;
+    }
+    /**
+     * Flash the toolbar auto-refresh indicator: add the `is-refreshing` class
+     * (fires the CSS spin) and strip it after ~600ms. Coalesces rapid ticks by
+     * resetting its own timer; a no-op when the indicator isn't in the DOM.
+     * @private
+     */
+    _pulseAutoRefreshIndicator() {
+      const el = this.element?.querySelector("[data-autorefresh-indicator]");
+      if (!el) return;
+      el.classList.add("is-refreshing");
+      if (this._autoRefreshPulseTimer) clearTimeout(this._autoRefreshPulseTimer);
+      this._autoRefreshPulseTimer = setTimeout(() => {
+        el.classList.remove("is-refreshing");
+        this._autoRefreshPulseTimer = null;
+      }, 600);
+    }
     setCollection(collection) {
       if (this.collection === collection) return this;
       if (this.collection) {
@@ -25183,9 +25786,304 @@ var MOJO = (function(exports) {
       return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
     }
     // ============================================================
+    // Auto-refresh (WM-034) — opt-in interval refetch with smart pause
+    // ============================================================
+    /**
+     * Normalize the `autoRefresh:` option into an interval in milliseconds.
+     * Accepts a positive number of seconds, clamped to a 5s floor to prevent
+     * hammering the API. Anything else (absent / non-number / ≤0) → 0, which
+     * disables the feature entirely (no timer, no listeners).
+     * @private
+     */
+    _normalizeAutoRefresh(raw) {
+      if (typeof raw !== "number" || !isFinite(raw) || raw <= 0) return 0;
+      return Math.max(5, raw) * 1e3;
+    }
+    /**
+     * Start the auto-refresh interval + focus/visibility listeners. No-op when
+     * `autoRefresh` wasn't configured, and idempotent — a second call while a
+     * timer is already live returns immediately, so cached-page re-entries
+     * (which re-fire onAfterMount) never stack a second interval.
+     * @private
+     */
+    _startAutoRefresh() {
+      if (!this._autoRefreshMs) return;
+      if (this._autoRefreshTimer) return;
+      this._autoRefreshPaused = this._autoRefreshDocHidden();
+      this._bindAutoRefreshListeners();
+      this._autoRefreshTimer = setInterval(() => this._autoRefreshTick(), this._autoRefreshMs);
+    }
+    /**
+     * Fully tear down the timer and its focus/visibility listeners. Safe to
+     * call when nothing is running.
+     * @private
+     */
+    _stopAutoRefresh() {
+      if (this._autoRefreshTimer) {
+        clearInterval(this._autoRefreshTimer);
+        this._autoRefreshTimer = null;
+      }
+      if (this._autoRefreshPulseTimer) {
+        clearTimeout(this._autoRefreshPulseTimer);
+        this._autoRefreshPulseTimer = null;
+      }
+      this._unbindAutoRefreshListeners();
+      this._autoRefreshPaused = false;
+    }
+    /**
+     * Bind window focus/blur + document visibilitychange listeners so the
+     * timer can pause while the tab is backgrounded and resume (with an
+     * immediate refetch) when the user returns. Idempotent.
+     * @private
+     */
+    _bindAutoRefreshListeners() {
+      if (this._autoRefreshHandlers) return;
+      const onBlur = () => {
+        this._autoRefreshPaused = true;
+      };
+      const onFocus = () => {
+        this._autoRefreshPaused = false;
+        this._autoRefreshResume();
+      };
+      const onVisibility = () => {
+        const hidden = this._autoRefreshDocHidden();
+        this._autoRefreshPaused = hidden;
+        if (!hidden) this._autoRefreshResume();
+      };
+      this._autoRefreshHandlers = { onBlur, onFocus, onVisibility };
+      if (typeof window !== "undefined") {
+        window.addEventListener("blur", onBlur);
+        window.addEventListener("focus", onFocus);
+      }
+      if (typeof document !== "undefined") {
+        document.addEventListener("visibilitychange", onVisibility);
+      }
+    }
+    /** @private */
+    _unbindAutoRefreshListeners() {
+      const h = this._autoRefreshHandlers;
+      if (!h) return;
+      if (typeof window !== "undefined") {
+        window.removeEventListener("blur", h.onBlur);
+        window.removeEventListener("focus", h.onFocus);
+      }
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", h.onVisibility);
+      }
+      this._autoRefreshHandlers = null;
+    }
+    /** @private */
+    _autoRefreshDocHidden() {
+      return typeof document !== "undefined" && (document.visibilityState === "hidden" || document.hidden === true);
+    }
+    /**
+     * Regaining focus / visibility fires an immediate guarded refetch, then the
+     * existing interval carries on at its normal cadence. No-op when no timer
+     * is live (so a stray focus event after teardown can't refetch).
+     * @private
+     */
+    _autoRefreshResume() {
+      if (!this._autoRefreshTimer) return;
+      this._autoRefreshTick();
+    }
+    /**
+     * One interval tick. Self-terminates if the view is no longer mounted
+     * (covers a cached Page that exited without an unmount hook reaching this
+     * child). Otherwise skips silently while any pause condition holds, then
+     * issues a silent `collection.fetch()` that preserves current params —
+     * Collection's own dedup/cancel machinery handles overlap.
+     * @private
+     */
+    _autoRefreshTick() {
+      if (!this.isMounted()) {
+        this._stopAutoRefresh();
+        return;
+      }
+      if (this._autoRefreshShouldSkip()) return;
+      if (!this.collection || !this.collection.restEnabled) return;
+      Promise.resolve(this.collection.fetch()).then(() => this._pulseAutoRefreshIndicator()).catch((err) => {
+        console.warn("ListView autoRefresh: fetch failed", err);
+      });
+    }
+    /**
+     * Pause predicate evaluated at tick time. Base ListView pauses while the
+     * tab is hidden/blurred or a selection is active. TableView overrides this
+     * to also pause during an inline cell edit or an open row context menu.
+     * @protected
+     * @returns {boolean} true → skip this tick (do not clear the timer).
+     */
+    _autoRefreshShouldSkip() {
+      if (this._autoRefreshPaused) return true;
+      if (this._autoRefreshDocHidden()) return true;
+      if (this.selectedItems && this.selectedItems.size > 0) return true;
+      return false;
+    }
+    // ============================================================
+    // View persistence (WM-035) — opt-in per-table saved view
+    //
+    // Persisted blob shape (versioned): `{ v: 1, sort?, size?, dayRange?,
+    // filters?: {…raw params…}, hidden?: [columnKey] }`. `filters` is the raw
+    // `collection.params` set MINUS start/size/sort and the day-range field
+    // param (which is re-derived from `dayRange`), so `field__in` collapsed keys
+    // and `dr_*` daterange triplets round-trip verbatim (preset matching depends
+    // on it). `hidden` is written by TableView's column chooser.
+    // ============================================================
+    /**
+     * The localStorage key for this view's saved state. Uses the explicit
+     * `persistKey` when supplied, else a stable identity of page route +
+     * collection endpoint (`<pathname>::<endpoint>`), namespaced under
+     * `mojo:tableview:`.
+     * @private
+     */
+    _persistStorageKey() {
+      const id = this.persistKey || this._defaultPersistKey();
+      return `mojo:tableview:${id}`;
+    }
+    /** @private */
+    _defaultPersistKey() {
+      const route = typeof window !== "undefined" && window.location && window.location.pathname || "";
+      const endpoint = this.collection && this.collection.endpoint || "";
+      return `${route}::${endpoint}`;
+    }
+    /**
+     * Resolve the localStorage backing object, or null when it's unavailable
+     * (SSR / privacy mode / access throws). All storage access funnels through
+     * here so the feature degrades to a no-op rather than throwing.
+     * @private
+     */
+    _persistStorage() {
+      try {
+        const ls = typeof globalThis !== "undefined" ? globalThis.localStorage : null;
+        if (ls && typeof ls.getItem === "function") return ls;
+      } catch (e) {
+      }
+      return null;
+    }
+    /**
+     * Read + validate the saved blob. Discards (and clears) anything that isn't
+     * this schema version or won't parse, returning null.
+     * @private
+     */
+    _readPersistedState() {
+      const store = this._persistStorage();
+      if (!store) return null;
+      let raw;
+      try {
+        raw = store.getItem(this._persistStorageKey());
+      } catch (e) {
+        return null;
+      }
+      if (!raw) return null;
+      let parsed;
+      try {
+        parsed = JSON.parse(raw);
+      } catch (e) {
+        this._clearPersistedStorage();
+        return null;
+      }
+      if (!parsed || typeof parsed !== "object" || parsed.v !== 1) {
+        this._clearPersistedStorage();
+        return null;
+      }
+      return parsed;
+    }
+    /** @private */
+    _writePersistedState(state) {
+      const store = this._persistStorage();
+      if (!store) return;
+      try {
+        store.setItem(this._persistStorageKey(), JSON.stringify(state));
+      } catch (e) {
+      }
+    }
+    /** @private */
+    _clearPersistedStorage() {
+      const store = this._persistStorage();
+      if (!store) return;
+      try {
+        store.removeItem(this._persistStorageKey());
+      } catch (e) {
+      }
+    }
+    /**
+     * Rehydrate the collection params from the saved blob. Fills only slots the
+     * current query didn't already set (URL > saved), so a shared link always
+     * wins. The day-range value is restored onto `this.dayRangeFilter` so the
+     * subsequent seed/control build uses it. Column visibility is delegated to
+     * the TableView hook. No-op unless persistState is on.
+     * @private
+     */
+    _restorePersistedState(queryKeys = []) {
+      if (!this.persistState || !this.collection) return;
+      const saved = this._readPersistedState();
+      if (!saved) return;
+      const params = this.collection.params || (this.collection.params = {});
+      const fromQuery = new Set(queryKeys);
+      fromQuery.delete("start");
+      fromQuery.delete("size");
+      if (saved.sort !== void 0 && !fromQuery.has("sort")) params.sort = saved.sort;
+      if (saved.size !== void 0) params.size = saved.size;
+      if (saved.dayRange !== void 0 && this.dayRangeFilter) {
+        const field = this.dayRangeFilter.field || "created";
+        if (!fromQuery.has(`${field}__gte`)) {
+          this.dayRangeFilter.value = saved.dayRange;
+        }
+      }
+      if (saved.filters && typeof saved.filters === "object") {
+        Object.keys(saved.filters).forEach((key) => {
+          if (!fromQuery.has(key)) params[key] = saved.filters[key];
+        });
+      }
+      if (typeof this._restoreHiddenColumns === "function") {
+        this._restoreHiddenColumns(saved.hidden);
+      }
+    }
+    /**
+     * Serialize the current view state to localStorage. Called on every
+     * `params-changed` (and by TableView on a column toggle). No-op unless
+     * persistState is on.
+     * @private
+     */
+    _savePersistedState() {
+      if (!this.persistState) return;
+      const params = this.collection && this.collection.params || {};
+      const dayRangeGteKey = this.dayRangeFilter ? `${this.dayRangeFilter.field || "created"}__gte` : null;
+      const filters = {};
+      Object.keys(params).forEach((key) => {
+        if (key === "start" || key === "size" || key === "sort") return;
+        if (dayRangeGteKey && key === dayRangeGteKey) return;
+        const value = params[key];
+        if (value === void 0 || value === null || value === "") return;
+        filters[key] = value;
+      });
+      const state = { v: 1 };
+      if (params.sort !== void 0) state.sort = params.sort;
+      if (params.size !== void 0) state.size = params.size;
+      if (this.dayRangeControl && typeof this.dayRangeControl.getValue === "function") {
+        state.dayRange = this.dayRangeControl.getValue();
+      } else if (this.dayRangeFilter) {
+        state.dayRange = this.dayRangeFilter.value;
+      }
+      if (Object.keys(filters).length > 0) state.filters = filters;
+      if (typeof this._getHiddenColumnKeys === "function") {
+        const hidden = this._getHiddenColumnKeys();
+        if (hidden && hidden.length > 0) state.hidden = hidden;
+      }
+      this._writePersistedState(state);
+    }
+    /**
+     * Public escape hatch — forget this table's saved view (both the view state
+     * and, via the TableView hook, any hidden columns), reverting to defaults.
+     */
+    clearPersistedState() {
+      this._clearPersistedStorage();
+      if (typeof this._onClearPersistedState === "function") this._onClearPersistedState();
+    }
+    // ============================================================
     // Cleanup
     // ============================================================
     async destroy() {
+      this._stopAutoRefresh();
       if (this.collection) {
         this.collection.off("add", this._onModelsAdded, this);
         this.collection.off("remove", this._onModelsRemoved, this);
@@ -25255,11 +26153,31 @@ var MOJO = (function(exports) {
       }
       return "";
     }
+    /**
+     * Whether this row's TableView has an `rowExpand` callback configured.
+     * Guarded (feature-detect the method) so plain/stub tableViews — and the
+     * "no rowExpand option" case — render byte-identical markup with no chevron
+     * column.
+     */
+    _isRowExpandEnabled() {
+      return !!(this.tableView && typeof this.tableView.isRowExpandEnabled === "function" && this.tableView.isRowExpandEnabled());
+    }
     /**
      * Build the row template with table cells
      */
     buildRowTemplate() {
       let template = "";
+      if (this._isRowExpandEnabled()) {
+        template += `
+        <td class="col-expand mojo-expand-cell">
+          <button type="button" class="mojo-expand-toggle"
+                  data-action="toggle-expand"
+                  aria-label="Toggle details" aria-expanded="false">
+            <i class="bi bi-chevron-right"></i>
+          </button>
+        </td>
+      `;
+      }
       if (this.tableView && this.tableView.isSelectable()) {
         template += `
         <td style="padding: 0;">
@@ -25510,6 +26428,24 @@ var MOJO = (function(exports) {
       if (id) {
         this.element.setAttribute("data-id", id);
       }
+      if (this._isRowExpandEnabled()) {
+        const expanded = !!(this.tableView.expandedRows && this.tableView.expandedRows.has(id));
+        this.element.classList.toggle("expanded", expanded);
+        const toggle = this.element.querySelector(".mojo-expand-toggle");
+        if (toggle) toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
+      }
+    }
+    /**
+     * Toggle the inline detail row for this model. Delegates to the TableView,
+     * which owns the detail-row DOM (it spans every column, so it lives outside
+     * this single-`<tr>` view). `stopPropagation` prevents the click from also
+     * triggering row-level actions or the context menu.
+     */
+    async onActionToggleExpand(event, _element) {
+      event.stopPropagation();
+      if (this.tableView && typeof this.tableView.toggleRowExpand === "function") {
+        await this.tableView.toggleRowExpand(this.model, this);
+      }
     }
     /**
      * Handle edit cell action
@@ -25898,6 +26834,12 @@ var MOJO = (function(exports) {
       this.actions = options.actions || null;
       this.contextMenu = options.contextMenu || options.rowContextMenu || null;
       this.batchActions = options.batchActions || null;
+      this.rowExpand = typeof options.rowExpand === "function" ? options.rowExpand : null;
+      this.rowExpandMultiple = options.rowExpandMultiple === true;
+      this.expandedRows = /* @__PURE__ */ new Set();
+      this.expandChildViews = /* @__PURE__ */ new Map();
+      this.columnChooser = options.columnChooser === true;
+      this._hiddenColumns = /* @__PURE__ */ new Set();
       this.searchable = options.searchable !== false;
       this.sortable = options.sortable !== false;
       this.filterable = options.filterable !== false;
@@ -25971,6 +26913,210 @@ var MOJO = (function(exports) {
         }
       });
     }
+    // ============================================================
+    // Column chooser / visibility (WM-035)
+    // ============================================================
+    /**
+     * Whether a column may be hidden via the chooser. Columns opt OUT with
+     * `hideable: false` (e.g. an id or actions column) — everything else is
+     * hideable by default.
+     * @private
+     */
+    _isColumnHideable(column) {
+      return column && column.hideable !== false;
+    }
+    /**
+     * Whether a column is currently hidden. A locked (`hideable: false`) column
+     * is never hidden regardless of any stale persisted key.
+     * @private
+     */
+    _isColumnHidden(column) {
+      if (!this.columnChooser) return false;
+      if (!this._isColumnHideable(column)) return false;
+      return this._hiddenColumns.has(column.key);
+    }
+    /**
+     * The columns to actually render. Returns the caller's `columns` array
+     * verbatim (same reference) when the chooser is off or nothing is hidden, so
+     * the opt-out path is byte-identical. Never mutates `this.columns`.
+     * @private
+     */
+    _getVisibleColumns() {
+      if (!this.columnChooser || this._hiddenColumns.size === 0) return this.columns;
+      return this.columns.filter((column) => !this._isColumnHidden(column));
+    }
+    /**
+     * Hidden column keys for persistence (only genuinely-hideable ones). Read by
+     * ListView's `_savePersistedState`.
+     * @private
+     */
+    _getHiddenColumnKeys() {
+      if (!this.columnChooser) return [];
+      return this.columns.filter((column) => this._isColumnHideable(column) && this._hiddenColumns.has(column.key)).map((column) => column.key);
+    }
+    /**
+     * Restore hidden columns from a persisted blob (called by ListView during
+     * `_restorePersistedState`, before the first render). Rebuilds the baked
+     * template + any already-built rows so the restored visibility takes effect.
+     * @private
+     */
+    _restoreHiddenColumns(hidden) {
+      if (!this.columnChooser || !Array.isArray(hidden) || hidden.length === 0) return;
+      hidden.forEach((key) => {
+        const column = this.columns.find((c) => c.key === key);
+        if (column && this._isColumnHideable(column)) this._hiddenColumns.add(key);
+      });
+      if (this._hiddenColumns.size === 0) return;
+      this.template = this.buildTableTemplate();
+      this._templateCache = null;
+      if (this.itemViews.size > 0) this._buildItems();
+    }
+    /**
+     * ListView `clearPersistedState()` hook — reset visibility to defaults (all
+     * columns shown) and repaint.
+     * @private
+     */
+    _onClearPersistedState() {
+      if (this._hiddenColumns.size === 0) return;
+      this._hiddenColumns.clear();
+      this._rebuildForColumnChange();
+    }
+    /**
+     * Re-bake the table template (header/footer reflect the visible columns) and
+     * rebuild the row views (TableRow re-generates its cells from the visible
+     * column set), then re-render once. Returns the render promise so callers can
+     * await a settled DOM. Used after any visibility change.
+     * @private
+     */
+    _rebuildForColumnChange() {
+      this.template = this.buildTableTemplate();
+      this._templateCache = null;
+      this._clearItems();
+      if (this.collection && !this.collection.isEmpty()) {
+        this.isEmpty = false;
+        this.collection.forEach((model, index) => this._createItemView(model, index));
+        this._applyPersistedSelections();
+        this._buildGroupHeaders();
+      } else {
+        this.isEmpty = true;
+      }
+      return this.render();
+    }
+    /**
+     * Toggle a data-action="toggle-column" checkbox. Ignores locked columns.
+     * Persists the new hidden set when persistState is on.
+     */
+    async onActionToggleColumn(_event, element) {
+      const key = element.getAttribute("data-column-key");
+      const column = this.columns.find((c) => c.key === key);
+      if (!column || !this._isColumnHideable(column)) return;
+      if (this._hiddenColumns.has(key)) {
+        this._hiddenColumns.delete(key);
+      } else {
+        this._hiddenColumns.add(key);
+      }
+      await this._rebuildForColumnChange();
+      if (this.persistState) this._savePersistedState();
+      this.emit("columns:change", { hidden: this._getHiddenColumnKeys() });
+    }
+    /**
+     * "Reset to defaults" chooser entry — show every column again AND clear the
+     * saved view (both column + view state share one storage entry).
+     */
+    async onActionColumnChooserReset(event, _element) {
+      if (event && typeof event.preventDefault === "function") event.preventDefault();
+      const hadHidden = this._hiddenColumns.size > 0;
+      this._hiddenColumns.clear();
+      this._clearPersistedStorage();
+      if (hadHidden) await this._rebuildForColumnChange();
+      this.emit("columns:reset");
+    }
+    /**
+     * The icon-only "Columns" toolbar dropdown. Locked (`hideable: false`)
+     * columns render as disabled, lock-marked rows; hideable columns are
+     * whole-row-clickable checkboxes. The persistence footer only shows when
+     * persistState is on. Returns '' when the chooser is off.
+     * @private
+     */
+    _buildColumnChooserTemplate() {
+      if (!this.columnChooser) return "";
+      const items = this.columns.map((column) => {
+        const label = this.escapeHtml(column.label || column.title || column.key);
+        if (!this._isColumnHideable(column)) {
+          return `
+          <label class="column-chooser-item is-locked" title="Always shown">
+            <input class="form-check-input" type="checkbox" checked disabled>
+            <span class="form-check-label">${label}</span>
+            <i class="bi bi-lock-fill column-chooser-lock" aria-hidden="true"></i>
+          </label>`;
+        }
+        const checked = this._isColumnHidden(column) ? "" : "checked";
+        return `
+        <label class="column-chooser-item">
+          <input class="form-check-input" type="checkbox" ${checked}
+                 data-action="toggle-column" data-column-key="${this.escapeHtml(column.key)}">
+          <span class="form-check-label">${label}</span>
+        </label>`;
+      }).join("");
+      const persistHint = this.persistState ? '<div class="column-chooser-persist"><i class="bi bi-check2-circle"></i>Saved for this table</div>' : "";
+      return `
+      <div class="dropdown">
+        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
+                data-bs-toggle="dropdown" aria-expanded="false" title="Choose columns">
+          <i class="bi bi-layout-three-columns"></i><span class="d-none d-xxl-inline ms-1">Columns</span>
+        </button>
+        <div class="dropdown-menu dropdown-menu-end column-chooser-menu" role="menu">
+          <h6 class="dropdown-header">Show columns</h6>
+          ${items}
+          <li><hr class="dropdown-divider"></li>
+          <a class="dropdown-item d-flex align-items-center" href="#" data-action="column-chooser-reset">
+            <i class="bi bi-arrow-counterclockwise me-2"></i>Reset to defaults
+          </a>
+          ${persistHint}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Scoped styles for the column-chooser dropdown. Token-first per
+     * `.claude/rules/theming.md`; the one black-at-4% hover carries its
+     * rgba(255,255,255) dark companion. Emitted once, only when the chooser is
+     * enabled (opt-out path carries zero CSS).
+     * @private
+     */
+    _buildColumnChooserStyles() {
+      return `
+      <style>
+        .column-chooser-menu { min-width: 268px; }
+        .column-chooser-menu .dropdown-header {
+          color: var(--bs-secondary-color);
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          font-size: 0.7rem;
+          font-weight: 600;
+        }
+        .column-chooser-item {
+          display: flex; align-items: center; gap: 0.5rem;
+          margin: 0; padding: 0.35rem 1rem; cursor: pointer;
+        }
+        .column-chooser-item .form-check-input { margin-top: 0; flex: 0 0 auto; }
+        .column-chooser-item .form-check-label { cursor: pointer; flex: 1 1 auto; color: var(--bs-body-color); }
+        .column-chooser-item:hover { background: rgba(0, 0, 0, 0.04); }
+        .column-chooser-item.is-locked { cursor: default; opacity: 0.72; }
+        .column-chooser-item.is-locked:hover { background: transparent; }
+        .column-chooser-item.is-locked .form-check-label { color: var(--bs-secondary-color); }
+        .column-chooser-lock { color: var(--bs-secondary-color); font-size: 0.8rem; }
+        .column-chooser-persist {
+          padding: 0.4rem 1rem 0.15rem;
+          color: var(--bs-secondary-color);
+          font-size: 0.72rem;
+          display: flex; align-items: center; gap: 0.35rem;
+        }
+
+        [data-bs-theme="dark"] .column-chooser-item:hover { background: var(--bs-secondary-bg); }
+      </style>
+    `;
+    }
     /**
      * Get responsive CSS classes for column visibility
      * @param {string|object} visibility - Bootstrap breakpoint or config object
@@ -26125,6 +27271,170 @@ var MOJO = (function(exports) {
     isSelectable() {
       return this.batchActions && this.batchActions.length > 0 && this.selectionMode === "multiple";
     }
+    /**
+     * Whether expandable detail rows are enabled (a `rowExpand` callback was
+     * provided). Read by TableRow to decide whether to render the chevron cell.
+     */
+    isRowExpandEnabled() {
+      return typeof this.rowExpand === "function";
+    }
+    /**
+     * Colspan for the full-width detail row: chevron col (+1 when enabled) +
+     * selection col + data cols + actions col. Mirrors the group-header colspan
+     * math (see `_groupHeaderViewOptions`).
+     */
+    _getRowExpandColspan() {
+      const dataCols = this._getVisibleColumns().length || 0;
+      const selectCol = this.isSelectable() ? 1 : 0;
+      const actionsCol = this.actions || this.contextMenu ? 1 : 0;
+      const expandCol = this.isRowExpandEnabled() ? 1 : 0;
+      return Math.max(1, expandCol + selectCol + dataCols + actionsCol);
+    }
+    /**
+     * Toggle the inline detail row for `model`. Called by TableRow's chevron
+     * handler. Single-open by default (`rowExpandMultiple: true` allows several).
+     */
+    async toggleRowExpand(model, rowView) {
+      if (!this.isRowExpandEnabled() || !model) return;
+      const id = model.id;
+      const isOpen = this.expandedRows.has(id);
+      if (isOpen) {
+        this._collapseRow(id);
+      } else {
+        if (!this.rowExpandMultiple) {
+          Array.from(this.expandedRows).forEach((otherId) => this._collapseRow(otherId));
+        }
+        this.expandedRows.add(id);
+        const rv = rowView || this.itemViews.get(id);
+        if (rv && rv.element) {
+          rv.element.classList.add("expanded");
+          const toggle = rv.element.querySelector(".mojo-expand-toggle");
+          if (toggle) toggle.setAttribute("aria-expanded", "true");
+        }
+        await this._renderExpandedRow(id);
+      }
+      this.emit("row:expand:toggle", { model, expanded: this.expandedRows.has(id) });
+    }
+    /**
+     * Collapse a single expanded row: drop it from state, remove its detail
+     * `<tr>` from the DOM, destroy any View payload, and reset the chevron.
+     * @private
+     */
+    _collapseRow(id) {
+      this.expandedRows.delete(id);
+      const detail = this.element?.querySelector(`tr.mojo-detail-row[data-detail-for="${id}"]`);
+      if (detail) detail.remove();
+      const child = this.expandChildViews.get(id);
+      if (child) {
+        this.removeChild(child);
+        this.expandChildViews.delete(id);
+      }
+      const rv = this.itemViews.get(id);
+      if (rv && rv.element) {
+        rv.element.classList.remove("expanded");
+        const toggle = rv.element.querySelector(".mojo-expand-toggle");
+        if (toggle) toggle.setAttribute("aria-expanded", "false");
+      }
+    }
+    /**
+     * Build and insert the detail `<tr>` for an expanded model directly after
+     * its data row. String payloads template into the panel; View payloads are
+     * mounted via `addChild()` + an explicit `render()` (the Dynamic Children
+     * pattern for children added after the parent has already rendered).
+     * @private
+     */
+    async _renderExpandedRow(id) {
+      const rowView = this.itemViews.get(id);
+      if (!rowView || !rowView.element || !rowView.element.parentNode) return;
+      const existing = this.element?.querySelector(`tr.mojo-detail-row[data-detail-for="${id}"]`);
+      if (existing) existing.remove();
+      const model = rowView.model;
+      let content;
+      try {
+        content = this.rowExpand(model);
+      } catch (error) {
+        console.error("TableView rowExpand() threw for model", id, error);
+        return;
+      }
+      const colspan = this._getRowExpandColspan();
+      const detailRow = document.createElement("tr");
+      detailRow.className = "mojo-detail-row";
+      detailRow.setAttribute("data-detail-for", id);
+      const isView = content && typeof content === "object" && typeof content.render === "function";
+      if (isView) {
+        const containerId = `row-expand-${id}`;
+        detailRow.innerHTML = `<td colspan="${colspan}"><div class="mojo-detail-panel"><div data-container="${containerId}"></div></div></td>`;
+        rowView.element.after(detailRow);
+        this.addChild(content, { containerId });
+        this.expandChildViews.set(id, content);
+        await content.render();
+      } else {
+        const html = content == null ? "" : String(content);
+        detailRow.innerHTML = `<td colspan="${colspan}"><div class="mojo-detail-panel">${html}</div></td>`;
+        rowView.element.after(detailRow);
+      }
+    }
+    /**
+     * Re-materialize every expanded detail row after a full re-render (which
+     * wipes `innerHTML`, detaching detail rows and any View payload elements).
+     * Rows whose model is no longer present — e.g. after a page change — are
+     * collapsed, satisfying "page change collapses all".
+     * @private
+     */
+    async _renderExpandedRows() {
+      if (!this.isRowExpandEnabled()) return;
+      Array.from(this.expandedRows).forEach((id) => {
+        if (!this.itemViews.has(id)) this._collapseRow(id);
+      });
+      if (this.expandedRows.size === 0) return;
+      this.expandChildViews.forEach((child) => this.removeChild(child));
+      this.expandChildViews.clear();
+      await Promise.all(Array.from(this.expandedRows, (id) => this._renderExpandedRow(id)));
+    }
+    /**
+     * Scoped inline styles for the chevron cell + detail panel. Emitted only
+     * when `rowExpand` is enabled so the opt-out path has zero markup/CSS delta.
+     * Light defaults first; the literal-tint dark companions are clustered at
+     * the bottom (per .claude/rules/theming.md).
+     * @private
+     */
+    _buildRowExpandStyles() {
+      return `
+      <style>
+        .table-view-component .col-expand { width: 2.4rem; padding: 0 !important; }
+        .table-view-component .mojo-expand-toggle {
+          display: flex; align-items: center; justify-content: center;
+          width: 100%; height: 100%; padding: 0.4rem 0;
+          cursor: pointer; color: var(--bs-secondary-color);
+          background: transparent; border: 0;
+        }
+        .table-view-component .mojo-expand-toggle:hover { color: var(--bs-emphasis-color); }
+        .table-view-component .mojo-expand-toggle .bi {
+          transition: transform 0.18s ease; font-size: 0.95rem; line-height: 1;
+        }
+        .table-view-component .table-row.expanded .mojo-expand-toggle .bi { transform: rotate(90deg); }
+        .table-view-component .table-row.expanded .mojo-expand-toggle { color: var(--bs-primary); }
+
+        .table-view-component tr.mojo-detail-row > td {
+          padding: 0 !important;
+          border-bottom: 1px solid var(--bs-border-color) !important;
+          background: rgba(0, 0, 0, 0.02);
+        }
+        .table-view-component .mojo-detail-panel {
+          margin: 0.6rem 0.85rem 0.9rem 3rem;
+          background: var(--bs-tertiary-bg);
+          border: 1px solid var(--bs-border-color);
+          border-left: 3px solid var(--bs-primary);
+          border-radius: 0.5rem;
+          padding: 0.95rem 1.1rem;
+        }
+
+        [data-bs-theme="dark"] .table-view-component tr.mojo-detail-row > td {
+          background: rgba(255, 255, 255, 0.015);
+        }
+      </style>
+    `;
+    }
     /**
      * Build the complete table template
      */
@@ -26138,22 +27448,25 @@ var MOJO = (function(exports) {
       })();
       return `
       <div class="mojo-table-wrapper">
+        ${this.isRowExpandEnabled() ? this._buildRowExpandStyles() : ""}
+        ${this.columnChooser ? this._buildColumnChooserStyles() : ""}
+        ${this._hasFeedbackFeature() ? this._buildFeedbackStyles() : ""}
         ${this.buildToolbarTemplate()}
         ${batchPanelTop}
         <div class="table-container"${fontSize}>
           {{#loading}}
-            <div class="mojo-table-loading d-flex justify-content-center align-items-center py-5">
+            ${this._loadingContent(`<div class="mojo-table-loading d-flex justify-content-center align-items-center py-5">
               <div class="spinner-border" role="status">
                 <span class="visually-hidden">Loading...</span>
               </div>
-            </div>
+            </div>`)}
           {{/loading}}
           {{^loading}}
             {{#isEmpty}}
-              <div class="table-empty text-center py-5">
+              ${this._emptyContent(`<div class="table-empty text-center py-5">
                 <i class="bi bi-inbox fa-2x mb-2 text-muted"></i>
                 <p class="text-muted">{{emptyMessage}}</p>
-              </div>
+              </div>`)}
             {{/isEmpty}}
             {{^isEmpty}}
               <table class="${this.buildTableClasses()}">
@@ -26169,6 +27482,31 @@ var MOJO = (function(exports) {
       </div>
     `;
     }
+    /**
+     * TableView skeleton (WM-033) — a full `<table>` whose header matches the
+     * real column layout and whose body is N shimmer rows (N from
+     * `_skeletonRowCount()`). Cell widths echo the real columns via cycled
+     * `skeleton-line w-*` classes; leading (expand / selection) and trailing
+     * (actions) cells mirror the row structure so the silhouette lines up.
+     * Overrides the ListView card-silhouette version.
+     * @private
+     */
+    _buildSkeletonHtml() {
+      const rowCount = this._skeletonRowCount();
+      const widths = ["w-90", "w-75", "w-60", "w-40", "w-25"];
+      const lead = (this.isRowExpandEnabled() ? '<td class="col-expand"></td>' : "") + (this.isSelectable() ? "<td></td>" : "");
+      const trail = this.actions || this.contextMenu ? '<td class="text-end"><span class="skeleton-line w-40 ms-auto"></span></td>' : "";
+      const cells = this._getVisibleColumns().map((column, i) => {
+        const alignClass = this.getAlignClass(column.align);
+        const w = widths[i % widths.length];
+        return `<td class="${alignClass}"><span class="skeleton-line ${w}"></span></td>`;
+      }).join("");
+      let body = "";
+      for (let i = 0; i < rowCount; i++) {
+        body += `<tr class="mojo-skeleton-row" aria-hidden="true">${lead}${cells}${trail}</tr>`;
+      }
+      return `<table class="${this.buildTableClasses()}">${this.buildTableHeaderTemplate()}<tbody>${body}</tbody></table>`;
+    }
     /**
      * Build table CSS classes
      */
@@ -26208,6 +27546,9 @@ var MOJO = (function(exports) {
           baseButtons = fullscreenBtn + baseButtons;
         }
       }
+      if (this.columnChooser) {
+        baseButtons += this._buildColumnChooserTemplate();
+      }
       return baseButtons;
     }
     /**
@@ -26215,6 +27556,9 @@ var MOJO = (function(exports) {
      */
     buildTableHeaderTemplate() {
       let headerCells = "";
+      if (this.isRowExpandEnabled()) {
+        headerCells += '<th class="col-expand mojo-expand-cell"></th>';
+      }
       if (this.isSelectable()) {
         headerCells += `
         <th style="width: 40px; padding: 0;">
@@ -26226,7 +27570,7 @@ var MOJO = (function(exports) {
         </th>
       `;
       }
-      this.columns.forEach((column) => {
+      this._getVisibleColumns().forEach((column) => {
         const { fieldKey } = this.parseColumnKey(column.key);
         const sortable = this.sortable && column.sortable !== false;
         const currentSort = this.getSortBy() === fieldKey ? this.getSortDirection() : null;
@@ -26285,15 +27629,17 @@ var MOJO = (function(exports) {
      */
     buildTableFooterTemplate() {
       let footerCells = "";
+      if (this.isRowExpandEnabled()) {
+        footerCells += "<td></td>";
+      }
       if (this.isSelectable()) {
         footerCells += "<td></td>";
       }
-      let totalColumnIndex = 0;
-      this.columns.forEach((column, index) => {
+      this._getVisibleColumns().forEach((column, index) => {
         const responsiveClasses = this.getResponsiveClasses(column.visibility);
         const alignClass = this.getAlignClass(column.align);
         if (column.footer_total) {
-          const safeKey = `col_${totalColumnIndex}`;
+          const safeKey = `col_${this.footerTotalColumns.indexOf(column)}`;
           const formatter = this.parseColumnKey(column.key).formatter || column.formatter;
           let cellContent;
           if (formatter && typeof formatter === "string") {
@@ -26302,7 +27648,6 @@ var MOJO = (function(exports) {
             cellContent = `{{footerTotals.${safeKey}.value}}`;
           }
           footerCells += `<td class="table-footer-total ${responsiveClasses} ${alignClass}" data-total-column="${safeKey}">${cellContent}</td>`;
-          totalColumnIndex++;
         } else if (index === 0) {
           footerCells += `<td class="table-footer-label ${responsiveClasses} ${alignClass}"><strong>Totals</strong></td>`;
         } else {
@@ -26406,7 +27751,7 @@ var MOJO = (function(exports) {
         listView: this,
         tableView: this,
         template: this.itemTemplate,
-        columns: this.columns,
+        columns: this._getVisibleColumns(),
         actions: this.actions,
         contextMenu: this.contextMenu,
         batchActions: this.batchActions,
@@ -26437,6 +27782,7 @@ var MOJO = (function(exports) {
       await super.onAfterRender();
       if (this.hasFooterTotals) this.updateFooterTotals();
       this.updateSortIcons();
+      await this._renderExpandedRows();
     }
     // -------- Cell-editing events (table-only) --------
     _onCellEdit(event) {
@@ -26448,6 +27794,22 @@ var MOJO = (function(exports) {
     _onCellCancel(event) {
       this.emit("cell:cancel", event);
     }
+    /**
+     * WM-034 — extend ListView's auto-refresh pause predicate with the two
+     * table-only cases: an in-progress inline cell edit (any TableRow with a
+     * non-empty `editingCells` set) or an open row context menu / dropdown
+     * (cheap `.dropdown-menu.show` DOM check). A silent refetch mid-edit would
+     * discard the editor; mid-menu it would close the menu under the user.
+     * @protected
+     */
+    _autoRefreshShouldSkip() {
+      if (super._autoRefreshShouldSkip()) return true;
+      for (const row of this.itemViews.values()) {
+        if (row && row.editingCells && row.editingCells.size > 0) return true;
+      }
+      if (this.element && this.element.querySelector(".dropdown-menu.show")) return true;
+      return false;
+    }
     // ============================================================
     // Grouped rows (TableView-aware overrides)
     //
@@ -26473,13 +27835,14 @@ var MOJO = (function(exports) {
      * @protected
      */
     _groupHeaderViewOptions(_model, _key, _index) {
-      const dataCols = this.columns?.length || 0;
+      const dataCols = this._getVisibleColumns().length || 0;
       const selectCol = this.isSelectable() ? 1 : 0;
       const actionsCol = this.actions || this.contextMenu ? 1 : 0;
+      const expandCol = this.isRowExpandEnabled() ? 1 : 0;
       return {
         tagName: "tr",
         className: `list-group-header-row list-group-header-row--${this.groupHeaderStyle}`,
-        colspan: Math.max(1, dataCols + selectCol + actionsCol)
+        colspan: Math.max(1, expandCol + dataCols + selectCol + actionsCol)
       };
     }
     // ============================================================