@keenmate/pure-admin-core 2.9.0-rc01 → 2.9.0-rc04

package/snippets/splitter.html

@@ -0,0 +1,216 @@
+<!-- ================================
+     SPLITTER
+     Pure Admin Visual Framework
+
+     Resizable container with two or more panes. Drag a gutter to resize,
+     double-click to collapse / restore, arrow keys nudge size when the
+     gutter is focused.
+
+     CSS + structure here; drag, keyboard, persistence behaviour is wired up
+     by packages/core/src/js/splitter.js. The script auto-initializes on
+     [data-pa-splitter] at DOMContentLoaded.
+
+     Markup model: panes and gutters alternate (pane, gutter, pane, gutter,
+     …, pane). Each pane carries its own sizing attributes — there's no
+     "start" / "end" shorthand, every pane is generic. Works for any
+     N ≥ 2.
+
+     Orientation modifiers (match flexbox direction of the panes):
+       --horizontal   panes side-by-side, vertical gutter (default)
+       --vertical     panes stacked, horizontal gutter
+
+     The splitter takes whatever width/height its parent gives it — make
+     sure the parent has a sized cross axis (height for --horizontal,
+     width for --vertical) or the panes will collapse.
+     ================================ -->
+
+
+<!-- ================================
+     HORIZONTAL SPLIT (2 panes)
+     Side-by-side panes; vertical gutter. The first pane has a 200px
+     floor and 60% ceiling, defaults to 280px; the second pane absorbs
+     the leftover. Persists under "demo-sidebar".
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--horizontal"
+     data-pa-splitter
+     data-pa-splitter-id="demo-sidebar"
+     style="height: 400px;">
+    <div class="pa-splitter__pane"
+         data-pa-splitter-size="280px"
+         data-pa-splitter-min="200px"
+         data-pa-splitter-max="60%">
+        <!-- Your sidebar / list / nav content -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane">
+        <!-- Your main / detail content (absorbs the leftover) -->
+    </div>
+</div>
+
+
+<!-- ================================
+     VERTICAL SPLIT (2 panes)
+     Stacked panes; horizontal gutter. Useful for editor + console / log
+     pane patterns.
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--vertical"
+     data-pa-splitter
+     data-pa-splitter-id="demo-console"
+     style="height: 400px;">
+    <div class="pa-splitter__pane"
+         data-pa-splitter-size="60%"
+         data-pa-splitter-min="80px"
+         data-pa-splitter-max="80%">
+        <!-- Editor / primary content -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="horizontal"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane">
+        <!-- Console / log / secondary -->
+    </div>
+</div>
+
+
+<!-- ================================
+     SPACED CARDS
+     Set `gap` on the splitter root to put breathing room between the
+     panes and the gutter — the JS subtracts it from the available
+     space so percent constraints still resolve correctly. Override
+     gutter thickness via the --pa-splitter-gutter-size custom property.
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--horizontal"
+     data-pa-splitter
+     style="height: 280px; gap: 1.6rem; --pa-splitter-gutter-size: 1rem;">
+    <div class="pa-splitter__pane"
+         data-pa-splitter-size="40%"
+         data-pa-splitter-min="25%"
+         data-pa-splitter-max="75%"
+         style="padding: 0;">
+        <div class="pa-card" style="height: 100%; margin: 0;">…</div>
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane" style="padding: 0;">
+        <div class="pa-card" style="height: 100%; margin: 0;">…</div>
+    </div>
+</div>
+
+
+<!-- ================================
+     N-PANE LAYOUT (3 panes — sidebar + content + inspector)
+     Per-pane attributes drive sizing. The first and last panes opt into
+     rail collapse via the minimize marker. Panes without a
+     data-pa-splitter-size share the leftover equally.
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--horizontal"
+     data-pa-splitter
+     data-pa-splitter-id="demo-three-pane"
+     style="height: 400px;">
+    <div class="pa-splitter__pane"
+         data-pa-splitter-size="240px"
+         data-pa-splitter-min="180px"
+         data-pa-splitter-max="360px"
+         data-pa-splitter-minimize>
+        <!-- File tree / nav (minimizable to a left rail) -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane"
+         data-pa-splitter-min="240px">
+        <!-- Editor / main content (fills the rest) -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane"
+         data-pa-splitter-size="280px"
+         data-pa-splitter-min="220px"
+         data-pa-splitter-max="420px"
+         data-pa-splitter-minimize>
+        <!-- Inspector / detail (minimizable to a right rail) -->
+    </div>
+</div>
+
+
+<!-- ================================
+     DATA ATTRIBUTES — root
+       data-pa-splitter                     marker; required
+       data-pa-splitter-id                  enables localStorage persistence
+                                            under "pa-splitter:<id>"
+       data-pa-splitter-step                keyboard step in px (default: 10)
+       data-pa-splitter-rail-size           rail width in px (default: 40)
+       data-pa-splitter-minimize-threshold  drag-to-rail snap ratio (default: 0.40)
+
+     DATA ATTRIBUTES — per pane
+       data-pa-splitter-size        "240px" or "30%" (default: shared leftover)
+       data-pa-splitter-min         "150px" or "10%" (default: 0)
+       data-pa-splitter-max         "400px" or "50%" (default: available)
+       data-pa-splitter-minimize    marker — pane can collapse to a rail.
+                                    First / last panes dock against the
+                                    container edge; middle panes collapse
+                                    in place and split released slack
+                                    between both neighbours.
+
+     CHILD ATTRIBUTES
+       data-pa-splitter-toggle      put on any element inside the splitter
+                                    (typically a button in the card header)
+                                    to trigger collapse / restore on click.
+                                    Toggles the enclosing pane if it's
+                                    minimizable.
+
+     RAIL-TITLE HOOK (non-card content)
+       Any element marked with `[data-pa-splitter-rail-title]` inside a
+       minimized pane rotates to vertical writing (sideways-rl). Use this
+       when you put plain content (not a `.pa-card`) in a minimizable pane:
+
+         <div class="pa-splitter__pane" data-pa-splitter-minimize>
+           <div data-pa-splitter-rail-title>📁 Files</div>
+           <!-- The rest of your pane content here -->
+         </div>
+
+       Cards adapt automatically — `_cards.scss` rotates the card header
+       inside any `.pa-splitter__pane--minimized` without needing the
+       attribute. No markup change needed for the card snippets above.
+
+     CSS CUSTOMIZATION
+       --pa-splitter-gutter-size    gutter thickness (default: 6px)
+       --pa-splitter-rail-size      rail width when a pane is minimized
+                                    (default: 40px / $splitter-rail-size).
+                                    JS picks this up via getComputedStyle, so
+                                    setting it on `:root` or per-instance via
+                                    inline style overrides the rail width
+                                    without also setting the data-attr.
+       gap                          space between panes and gutter
+                                    (native flexbox property)
+
+     MODIFIER CLASSES
+       pa-splitter--minimize-mirror flip the minimized title 180°
+                                    (transform: scale(-1,-1) on the heading
+                                     inside any `[data-pa-splitter-rail-title]`
+                                     or `.pa-card__header`)
+       pa-splitter--accordion       (auto, JS-managed) added when the
+                                    container is narrower than the sum of
+                                    all pane mins + gutters/gaps/padding
+                                    AND there are 2+ minimizable panes.
+                                    While active, restoring one pane
+                                    auto-rails the others.
+
+     JAVASCRIPT API (window.PaSplitter)
+       PaSplitter.init(el)          initialize a single element (idempotent)
+       PaSplitter.initAll(root?)    initialize all uninitialized splitters
+                                    under root (default: document)
+     ================================ -->

package/snippets/statistics.html

@@ -140,6 +140,23 @@
   </div>
 </div>
 
+<!-- Fit + progressive-disclosure mode (--square[data-pa-stat-fit])
+     Opt in with the data-pa-stat-fit attribute and load pa-stat-fit.js.
+     The number is sized to fill the tile (never overflows, any char count);
+     lower-priority rows reveal as the tile earns BOTH width and height:
+       number → symbol → label → change → context.
+     Authored markup stays flat — the JS wraps __number + __symbol into a
+     __slot > __group at runtime. REQUIRES a height source on the tile
+     (grid cell with a set height / explicit height / aspect-ratio), because
+     container-type: size makes the box size independently of its content. -->
+<div class="pa-stat pa-stat--square pa-stat--info" data-pa-stat-fit style="height: 16rem;">
+  <span class="pa-stat__symbol">$</span>
+  <span class="pa-stat__number">847K</span>
+  <div class="pa-stat__label">Monthly Revenue</div>
+  <div class="pa-stat__change pa-stat__change--positive">▲ 12.5% vs last month</div>
+  <div class="pa-stat__context">Updated 2 min ago</div>
+</div>
+
 <!-- All six square colour variants -->
 <div class="pa-stat pa-stat--square pa-stat--primary">  <div class="pa-stat__number">…</div><div class="pa-stat__symbol">…</div><div class="pa-stat__label">Primary</div>  </div>
 <div class="pa-stat pa-stat--square pa-stat--success">  <div class="pa-stat__number">…</div><div class="pa-stat__symbol">…</div><div class="pa-stat__label">Success</div>  </div>
@@ -169,6 +186,13 @@ SUB-ELEMENTS:
                             (red), --neutral (muted).
   .pa-stat__symbol         Square variant only — the decorative
                             watermark symbol on the inline-end side.
+  .pa-stat__context        Square fit-mode only — lowest-priority
+                            (P4) caption row (e.g. "Updated 2m ago").
+  .pa-stat__slot           Square fit-mode only — created by
+                            pa-stat-fit.js; wraps the fit group.
+  .pa-stat__group          Square fit-mode only — created by
+                            pa-stat-fit.js; holds __number + __symbol
+                            and carries the JS-computed font-size.
 
 VARIANTS (mutually exclusive):
   (default)                Icon + content row. Pair with
@@ -180,6 +204,13 @@ VARIANTS (mutually exclusive):
   --square                 Coloured tile, big __number, decorative
                             __symbol, bottom-pinned __label. Apply
                             a colour modifier on the same element.
+  [data-pa-stat-fit]       Attribute (not a class), combine WITH
+                            --square. Fit-to-box number + priority
+                            disclosure ladder (number → symbol →
+                            label → change → context, revealed as the
+                            tile gains width AND height). Needs
+                            pa-stat-fit.js loaded and a height source
+                            on the tile.
 
 SQUARE COLOUR MODIFIERS (apply with --square):
   --primary, --success, --info, --warning, --danger, --secondary

package/src/js/btn-split-auto-absorb.js

@@ -0,0 +1,327 @@
+/**
+ * Pure Admin — Split Button Auto-Absorb
+ *
+ * Extends the split button (.pa-btn-split) to automatically absorb adjacent
+ * sibling buttons sitting next to it inside a `.pa-btn-toolbar` row, when
+ * the row can't fit them all on one line. Absorbed items drop into the
+ * split button's own dropdown menu and return to the row as space comes
+ * back. Reuses the existing split-button toggle / menu / Floating UI
+ * positioning — no parallel chrome.
+ *
+ * Opt-in markup:
+ *
+ *   <div class="pa-btn-toolbar">
+ *     <button class="pa-btn pa-btn--primary">Save</button>
+ *     <button class="pa-btn pa-btn--primary">Format</button>
+ *     <button class="pa-btn pa-btn--primary"
+ *             data-pa-absorb-priority="10">Refresh</button>
+ *     <div class="pa-btn-split pa-btn-split--auto-absorb">
+ *       <button class="pa-btn pa-btn--primary">Run</button>
+ *       <button class="pa-btn pa-btn--primary pa-btn-split__toggle"
+ *               onclick="toggleSplitMenu(event)">
+ *         <i class="fas fa-chevron-down pa-btn-split__chevron"></i>
+ *       </button>
+ *       <div class="pa-btn-split__menu">
+ *         <div class="pa-btn-split__menu-inner">
+ *           <button class="pa-btn-split__item">Run with options…</button>
+ *         </div>
+ *       </div>
+ *     </div>
+ *   </div>
+ *
+ * Drop order: lowest `data-pa-absorb-priority` (default 0) drops first;
+ * ties broken by DOM order with the sibling closest to the split button
+ * dropping first (`data-pa-absorb-from="end"`, default). Flip with
+ * `="start"` to drop the leftmost sibling first instead.
+ *
+ * Absorbed items keep their original click handlers (the DOM node is
+ * preserved). On absorb, their classList is replaced with
+ * `pa-btn-split__item` so they pick up the standard menu-row styling; the
+ * original classList is stashed on the element and restored when the item
+ * returns to the bar.
+ *
+ * Existing static menu items (rendered into `__menu-inner` server-side)
+ * stay BELOW absorbed items: the first static child is captured at init
+ * and used as the insertBefore anchor.
+ *
+ * Layout contract: the bar needs `min-width: 0; overflow: hidden;
+ * flex-shrink: 1` so it actually shrinks below its content (otherwise
+ * `scrollWidth > clientWidth` never goes truthful). `_buttons.scss`
+ * supplies that for `.pa-btn-toolbar`; any flex row with equivalent
+ * styling works.
+ *
+ * Opt in to console diagnostics: `window.PA_BTN_SPLIT_AUTO_ABSORB_DEBUG = true`
+ * before page load.
+ *
+ * Public API (window.PaBtnSplitAutoAbsorb):
+ *   init(splitContainer) — idempotent single-container init
+ *   initAll(scope)       — initialize all uninitialized auto-absorb split
+ *                          buttons under scope
+ */
+(function () {
+    'use strict';
+
+    var INIT_FLAG = '__paBtnSplitAutoAbsorbInit';
+    var SELECTOR = '.pa-btn-split.pa-btn-split--auto-absorb';
+    var STASH_KEY = '__paAbsorbOrigClass';
+
+    function init(splitContainer) {
+        if (!splitContainer || splitContainer[INIT_FLAG]) return;
+        if (!splitContainer.classList.contains('pa-btn-split')) return;
+        if (!splitContainer.classList.contains('pa-btn-split--auto-absorb')) return;
+
+        var bar = splitContainer.parentNode;
+        if (!bar || bar.nodeType !== 1) return;
+
+        var menu = splitContainer.querySelector('.pa-btn-split__menu');
+        var menuInner = menu && menu.querySelector('.pa-btn-split__menu-inner');
+        if (!menuInner) return;
+
+        splitContainer[INIT_FLAG] = true;
+
+        // First static menu child captured at init — absorbed items are
+        // inserted BEFORE it so static items stay at the bottom of the menu.
+        // If there are no static items this stays null and insertBefore
+        // degrades to appendChild, which is exactly what we want.
+        var firstStaticItem = menuInner.firstElementChild || null;
+
+        // The split button's OWN primary action (the non-toggle `.pa-btn`) and
+        // its toggle. When even an empty bar can't fit the whole split button,
+        // the primary folds into the menu as a last resort and only the toggle
+        // stays visible (see absorbPrimary / the final relayout step).
+        var toggleBtn = splitContainer.querySelector('.pa-btn-split__toggle');
+        var primaryBtn = null;
+        for (var pc = splitContainer.firstElementChild; pc; pc = pc.nextElementSibling) {
+            if (pc !== toggleBtn && pc.classList &&
+                pc.classList.contains('pa-btn') &&
+                !pc.classList.contains('pa-btn-split__toggle')) {
+                primaryBtn = pc;
+                break;
+            }
+        }
+        var canCollapsePrimary = !!(primaryBtn && toggleBtn);
+
+        // Collect siblings that come BEFORE the split container in the bar.
+        // We snapshot at init time — siblings added after init won't be
+        // tracked (call init again, or refactor to MutationObserver later).
+        var candidates = [];
+        var idx = 0;
+        for (var node = bar.firstElementChild; node && node !== splitContainer; node = node.nextElementSibling) {
+            var p = parseInt(node.getAttribute('data-pa-absorb-priority'), 10);
+            candidates.push({
+                el: node,
+                priority: isNaN(p) ? 0 : p,
+                domIndex: idx
+            });
+            idx++;
+        }
+        if (candidates.length === 0 && !canCollapsePrimary) return;
+
+        var dropOrder = [];
+        function buildDropOrder() {
+            var fromAttr = splitContainer.getAttribute('data-pa-absorb-from');
+            var dropFromStart = fromAttr === 'start';
+            dropOrder = candidates.slice().sort(function (a, b) {
+                if (a.priority !== b.priority) return a.priority - b.priority;
+                // Default ("end") drops the sibling nearest the split
+                // button first — feels right because that's the one
+                // visually adjacent to the menu it falls into.
+                return dropFromStart ? (a.domIndex - b.domIndex) : (b.domIndex - a.domIndex);
+            });
+        }
+        buildDropOrder();
+
+        var DEBUG = window.PA_BTN_SPLIT_AUTO_ABSORB_DEBUG === true;
+        var label = '[pa-btn-split-auto-absorb#' + (splitContainer.id || candidates.map(function (c) { return c.el.tagName; }).join('-')).slice(0, 40) + ']';
+        function log() {
+            if (!DEBUG) return;
+            var args = Array.prototype.slice.call(arguments);
+            console.log.apply(console, [label].concat(args));
+        }
+
+        // Rewrite any `<span class="pa-btn__icon">` inside an absorbed item
+        // to the canonical `pa-btn-split__item-icon`. The pa-btn icon column
+        // width is scoped to `.pa-btn:has(.pa-btn__icon) .pa-btn__icon` —
+        // once the outer button stops being a `.pa-btn`, that rule no
+        // longer matches and the icon span goes auto-width, throwing
+        // absorbed labels out of column with static items.
+        function rewriteIcons(el) {
+            var icons = el.querySelectorAll('.pa-btn__icon');
+            for (var i = 0; i < icons.length; i++) {
+                if (icons[i][STASH_KEY] == null) {
+                    icons[i][STASH_KEY] = icons[i].className;
+                }
+                icons[i].className = 'pa-btn-split__item-icon';
+            }
+        }
+
+        function restoreIcons(el) {
+            // After a previous absorb cycle the icon spans now carry our
+            // rewritten class. Find them and put their original class back.
+            var icons = el.querySelectorAll('.pa-btn-split__item-icon');
+            for (var i = 0; i < icons.length; i++) {
+                if (icons[i][STASH_KEY] != null) {
+                    icons[i].className = icons[i][STASH_KEY];
+                }
+            }
+        }
+
+        function moveToMenu(el) {
+            if (el[STASH_KEY] == null) {
+                el[STASH_KEY] = el.className;
+            }
+            el.className = 'pa-btn-split__item';
+            rewriteIcons(el);
+            menuInner.insertBefore(el, firstStaticItem);
+        }
+
+        function moveToBar(el) {
+            if (el[STASH_KEY] != null) {
+                el.className = el[STASH_KEY];
+                restoreIcons(el);
+            }
+            // insertBefore moves the node if already attached, so calling
+            // it unconditionally keeps siblings in their original DOM
+            // order even after a drop-from-start cycle reshuffled them.
+            bar.insertBefore(el, splitContainer);
+        }
+
+        // Last-resort collapse: fold the split button's OWN primary action
+        // into the menu (as the top item) so only the toggle chevron remains
+        // when even an otherwise-empty bar can't fit the full split button.
+        var primaryAbsorbed = false;
+        function absorbPrimary() {
+            if (primaryAbsorbed || !canCollapsePrimary) return;
+            if (primaryBtn[STASH_KEY] == null) primaryBtn[STASH_KEY] = primaryBtn.className;
+            primaryBtn.className = 'pa-btn-split__item';
+            rewriteIcons(primaryBtn);
+            // Above absorbed siblings + static items — the primary action is
+            // the most important row, so it sits at the top of the menu.
+            menuInner.insertBefore(primaryBtn, menuInner.firstChild);
+            splitContainer.classList.add('pa-btn-split--collapsed');
+            primaryAbsorbed = true;
+        }
+        function restorePrimary() {
+            if (!primaryAbsorbed || !canCollapsePrimary) return;
+            if (primaryBtn[STASH_KEY] != null) {
+                primaryBtn.className = primaryBtn[STASH_KEY];
+                restoreIcons(primaryBtn);
+            }
+            // Back to its slot: immediately before the toggle.
+            splitContainer.insertBefore(primaryBtn, toggleBtn);
+            splitContainer.classList.remove('pa-btn-split--collapsed');
+            primaryAbsorbed = false;
+        }
+
+        function relayout() {
+            log('relayout entered');
+
+            // Step 1 — fully expand before measuring: primary action back in
+            // the split button, all candidates back in the bar in original
+            // DOM order (immediately before the split container).
+            restorePrimary();
+            candidates.slice().sort(function (a, b) {
+                return a.domIndex - b.domIndex;
+            }).forEach(function (item) {
+                moveToBar(item.el);
+            });
+
+            var clientW = bar.clientWidth;
+            var scrollW = bar.scrollWidth;
+            log('step 2', {
+                clientW: clientW,
+                scrollW: scrollW,
+                fitsAll: scrollW <= clientW
+            });
+
+            if (scrollW <= clientW) {
+                log('all fits');
+                return;
+            }
+
+            // Step 3 — absorb siblings in drop order until it fits.
+            for (var i = 0; i < dropOrder.length; i++) {
+                if (bar.scrollWidth <= bar.clientWidth) break;
+                moveToMenu(dropOrder[i].el);
+                log('absorbed', dropOrder[i].el);
+            }
+
+            // Step 4 — last resort: every sibling is absorbed and it STILL
+            // overflows (a very narrow card header). Fold the split button's
+            // own primary action into the menu so only the toggle remains;
+            // otherwise the primary + toggle spill past the bar's
+            // overflow:hidden edge and the toggle becomes unclickable.
+            if (bar.scrollWidth > bar.clientWidth) {
+                absorbPrimary();
+                log('absorbed primary — collapsed to toggle');
+            }
+            log('done');
+        }
+
+        // A stable ancestor whose width tracks the card / window, NOT our button
+        // shuffling: the nearest `.pa-card__header` (its width is the card width
+        // no matter how the shrinkable `.pa-card__actions` collapses around the
+        // toolbar), else the toolbar's own parent for standalone use (a sized /
+        // resizable wrapper). It must NOT be the shrinkable actions wrapper —
+        // that resizes in response to OUR own absorb/restore, which fed a
+        // nondeterministic feedback storm (the reload-vs-resize hysteresis).
+        var widthHost = (bar.closest && bar.closest('.pa-card__header')) || bar.parentNode;
+
+        // Coalesce a burst of size changes (ours + real layout) into ONE
+        // relayout on the next frame. relayout is deterministic — it always
+        // measures from a full restore — so one pass per frame converges without
+        // the ResizeObserver loop-limit suppression that can freeze a transient
+        // state.
+        var relayoutScheduled = false;
+        function scheduleRelayout() {
+            if (relayoutScheduled) return;
+            relayoutScheduled = true;
+            requestAnimationFrame(function () {
+                relayoutScheduled = false;
+                relayout();
+            });
+        }
+
+        // First pass after layout settles.
+        requestAnimationFrame(relayout);
+
+        if (typeof ResizeObserver !== 'undefined') {
+            var ro = new ResizeObserver(scheduleRelayout);
+            // The toolbar itself — catches ANY change in the space available to
+            // it, including the header title being given a larger `min-width`
+            // floor (which widens the title and narrows the toolbar WITHOUT
+            // changing the header's outer width). A bar-only observer isn't
+            // enough on its own: once the toolbar collapses to a lone toggle its
+            // box stops shrinking, so…
+            ro.observe(bar);
+            // …also watch the stable width host, so widening the card re-fires
+            // and lets relayout re-expand from the collapsed state.
+            if (widthHost && widthHost.nodeType === 1 && widthHost !== bar) {
+                ro.observe(widthHost);
+            }
+        }
+
+        // React to live `data-pa-absorb-from` flips so consumers can change
+        // drop direction at runtime without re-initializing.
+        if (typeof MutationObserver !== 'undefined') {
+            var mo = new MutationObserver(function () {
+                buildDropOrder();
+                relayout();
+            });
+            mo.observe(splitContainer, { attributes: true, attributeFilter: ['data-pa-absorb-from'] });
+        }
+    }
+
+    function initAll(scope) {
+        var nodes = (scope || document).querySelectorAll(SELECTOR);
+        for (var i = 0; i < nodes.length; i++) init(nodes[i]);
+    }
+
+    window.PaBtnSplitAutoAbsorb = { init: init, initAll: initAll };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function () { initAll(); });
+    } else {
+        initAll();
+    }
+})();