@keenmate/pure-admin-core 2.9.0-rc03 → 2.9.0-rc05

package/snippets/splitter.html

@@ -10,12 +10,10 @@
      by packages/core/src/js/splitter.js. The script auto-initializes on
      [data-pa-splitter] at DOMContentLoaded.
 
-     Two markup flavours:
-       * 2-pane shorthand — uses --start / --end modifiers and root-level
-         min-start / max-start / default attributes (sections 1–3 below).
-       * N-pane (N ≥ 2) — generic panes with per-pane size / min / max
-         attributes (section 4 below). Use this when you have 3+ panes
-         or want more than one minimizable pane.
+     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)
@@ -28,33 +26,34 @@
 
 
 <!-- ================================
-     HORIZONTAL SPLIT
-     Side-by-side panes; vertical gutter. Start pane has a 200px floor
-     and 60% ceiling, defaults to 280px, persists under "demo-sidebar".
+     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"
-     data-pa-splitter-min-start="200px"
-     data-pa-splitter-max-start="60%"
-     data-pa-splitter-default="280px"
      style="height: 400px;">
-    <div class="pa-splitter__pane pa-splitter__pane--start">
+    <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 pa-splitter__pane--end">
-        <!-- Your main / detail content -->
+    <div class="pa-splitter__pane">
+        <!-- Your main / detail content (absorbs the leftover) -->
     </div>
 </div>
 
 
 <!-- ================================
-     VERTICAL SPLIT
+     VERTICAL SPLIT (2 panes)
      Stacked panes; horizontal gutter. Useful for editor + console / log
      pane patterns.
      ================================ -->
@@ -62,18 +61,18 @@
 <div class="pa-splitter pa-splitter--vertical"
      data-pa-splitter
      data-pa-splitter-id="demo-console"
-     data-pa-splitter-min-start="80px"
-     data-pa-splitter-max-start="80%"
-     data-pa-splitter-default="60%"
      style="height: 400px;">
-    <div class="pa-splitter__pane pa-splitter__pane--start">
+    <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 pa-splitter__pane--end">
+    <div class="pa-splitter__pane">
         <!-- Console / log / secondary -->
     </div>
 </div>
@@ -90,14 +89,18 @@
 <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 pa-splitter__pane--start" style="padding: 0;">
+    <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 pa-splitter__pane--end" style="padding: 0;">
+    <div class="pa-splitter__pane" style="padding: 0;">
         <div class="pa-card" style="height: 100%; margin: 0;">…</div>
     </div>
 </div>
@@ -105,8 +108,8 @@
 
 <!-- ================================
      N-PANE LAYOUT (3 panes — sidebar + content + inspector)
-     Per-pane attributes replace the root-level --start ones. Only the
-     first and last panes honour the minimize marker. Panes without a
+     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.
      ================================ -->
 
@@ -144,7 +147,7 @@
 
 
 <!-- ================================
-     DATA ATTRIBUTES — root (both modes)
+     DATA ATTRIBUTES — root
        data-pa-splitter                     marker; required
        data-pa-splitter-id                  enables localStorage persistence
                                             under "pa-splitter:<id>"
@@ -152,25 +155,22 @@
        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 — root (legacy 2-pane only)
-       data-pa-splitter-min-start   "200px" or "20%" (default: 0)
-       data-pa-splitter-max-start   "60%" or "800px" (default: available)
-       data-pa-splitter-default     initial size when no saved state
-       data-pa-splitter-minimize    "start" or "end" — opt into rail collapse
-
-     DATA ATTRIBUTES — per pane (N-pane only)
+     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 — only honoured on the first
-                                    and last panes
+       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 (both modes)
+     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.
-                                    In N-pane mode, toggles the enclosing
-                                    pane (if it's minimizable).
+                                    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
@@ -202,6 +202,12 @@
                                     (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)

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();
+    }
+})();