@grafloria/element 0.4.39 → 0.4.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.39",
+  "version": "0.4.41",
   "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",

package/src/lib/dashboard-kit/caption.d.ts

@@ -107,7 +107,7 @@ interface CaptionDiagram {
 /**
  * Does the board that HOLDS this section paint section chrome? Only the grid
  * binder draws the slab overlay the band lives on, so a section inside a
- * SPLIT board has no band — and must not reserve space for one.
+ * SPLIT board paints its bands too since 0.4.40 (it had none, and reserved none).
  *
  * Read from the parent group's persisted layout rather than from the live
  * binder registry: membership and metadata both exist before either binder is

package/src/lib/dashboard-kit/caption.js

@@ -51,7 +51,7 @@ export function pairOf(v, dflt) {
 /**
  * Does the board that HOLDS this section paint section chrome? Only the grid
  * binder draws the slab overlay the band lives on, so a section inside a
- * SPLIT board has no band — and must not reserve space for one.
+ * SPLIT board paints its bands too since 0.4.40 (it had none, and reserved none).
  *
  * Read from the parent group's persisted layout rather than from the live
  * binder registry: membership and metadata both exist before either binder is
@@ -60,13 +60,15 @@ export function pairOf(v, dflt) {
  * first, and a child binds BEFORE its parent).
  */
 export function parentPaintsSectionChrome(diagram, group) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const groups = (_b = (_a = diagram.getGroups) === null || _a === void 0 ? void 0 : _a.call(diagram)) !== null && _b !== void 0 ? _b : [];
     for (const g of groups) {
         if (g === group || !((_c = g.members) === null || _c === void 0 ? void 0 : _c.has(group.id)))
             continue;
-        const board = g.getMetadata('dashboardBoard');
-        return ((_d = board === null || board === void 0 ? void 0 : board.layout) !== null && _d !== void 0 ? _d : 'grid') !== 'split';
+        // A grid board paints slabs and bands, and since 0.4.40 a split board
+        // paints them too (it lost the Operations band the moment the fluid demo
+        // switched to Split) — any board parent paints; only a view does not.
+        return true;
     }
     return false; // not a member of any board: a view, which carries no caption
 }

package/src/lib/dashboard-kit/dashboard.js

@@ -1051,6 +1051,30 @@ export function createDashboardHandle(ctx) {
         const label = (_e = pageSpec.title) !== null && _e !== void 0 ? _e : pageId;
         const size = { width: (_g = (_f = pg.size) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : 0, height: ((_j = (_h = pg.size) === null || _h === void 0 ? void 0 : _h.height) !== null && _j !== void 0 ? _j : 0) + tabStripReserve(tabsOpts, 1) };
         const remaining = [...((_k = from.members) !== null && _k !== void 0 ? _k : [])].filter((m) => m !== pageId && !!model.getGroup(m));
+        // The page that was showing when the gesture began. Undo puts the tab
+        // back — and shows THAT page again, not the one the container switched to
+        // when the tab left (the live walk: Filters showing, tear out, undo, Alerts
+        // showing — 0.4.41). It goes FIRST in each move sequence so its undo runs
+        // LAST, after the tab is back among the pages: a sync fired in between by
+        // a neighbour's reflow would otherwise reset a page that is not there yet.
+        const showing = ctx.activeTab.get(containerId);
+        const showingAgain = () => new RegisterWidgetCommand({
+            register: () => { },
+            unregister: () => {
+                var _a, _b, _c, _d;
+                const cg = (_a = ctx.boardGroups.get(containerId)) !== null && _a !== void 0 ? _a : model.getGroup(containerId);
+                const spec = specById.get(containerId);
+                if (!showing || !cg || !spec || ctx.activeTab.get(containerId) === showing)
+                    return;
+                if (!((_b = spec.widgets) !== null && _b !== void 0 ? _b : []).some((p) => p.id === showing) || !((_c = cg.members) === null || _c === void 0 ? void 0 : _c.has(showing)))
+                    return;
+                ctx.activeTab.set(containerId, showing);
+                spec.active = showing;
+                const cw = (_d = cg.getMetadata('containerWidget')) !== null && _d !== void 0 ? _d : {};
+                cg.setMetadata('containerWidget', Object.assign(Object.assign({}, cw), { active: showing }));
+                teleport(ctx.container, () => { var _a; return (_a = ctx.syncTabs) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId); });
+            },
+        }, 'register');
         return {
             arrivingId: W,
             label,
@@ -1120,6 +1144,7 @@ export function createDashboardHandle(ctx) {
                 };
                 const move = [
                     new SequenceCommand('Move tab out', [
+                        showingAgain(),
                         new AddGroupCommand(g),
                         new RemoveFromGroupCommand(containerId, pageId),
                         new AddToGroupCommand(W, pageId),
@@ -1202,6 +1227,7 @@ export function createDashboardHandle(ctx) {
                 };
                 const move = [
                     new SequenceCommand('Move tab', [
+                        showingAgain(),
                         new RemoveFromGroupCommand(containerId, pageId),
                         new AddToGroupCommand(targetId, pageId),
                         new RegisterWidgetCommand(joined, 'register'),

package/src/lib/dashboard-kit/split-binder.d.ts

@@ -27,7 +27,7 @@ import type { DashboardGridApi, DashboardGridHandle, DashboardGridOptions } from
 import { type SplitNode } from './split-layout.js';
 /** Group metadata key the tree persists under. */
 export declare const SPLIT_TREE_KEY = "dashboardTree";
-export interface DashboardSplitOptions extends Pick<DashboardGridOptions, 'columns' | 'gap' | 'padding' | 'rtl' | 'fluid' | 'static' | 'dragHandle' | 'squeeze' | 'designHeight' | 'baseRowHeight' | 'dragOut' | 'removeZone' | 'onRemoveRequest' | 'onDropIn' | 'onGesture' | 'onSelect'> {
+export interface DashboardSplitOptions extends Pick<DashboardGridOptions, 'columns' | 'gap' | 'padding' | 'rtl' | 'fluid' | 'static' | 'dragHandle' | 'squeeze' | 'designHeight' | 'baseRowHeight' | 'dragOut' | 'removeZone' | 'onRemoveRequest' | 'onDropIn' | 'onGesture' | 'onSelect' | 'renderCaption' | 'onCaptionAction'> {
     /** An authored tree. Default: the persisted one, else derived from the members' cells. */
     tree?: SplitNode | null;
 }

package/src/lib/dashboard-kit/split-binder.js

@@ -29,7 +29,7 @@ import { anyEdge, clearOtherSelections, dragHandleSelector, gripHostOf, gripOf,
 import { cellFromGridItem } from './grid-mapping.js';
 import { addSplitLeaf, cellsFromSplit, cloneSplit, dividersOf, groupRectsOf, insertSplitLeaf, moveSplitDivider, normalizeSplit, pathToLeaf, projectSplit, removeSplitLeaf, splitFromCells, splitLeaves, } from './split-layout.js';
 import { ensureDashboardKitStyles } from './styles.js';
-import { sectionCaptionReserve } from './caption.js';
+import { captionKey, captionOfGroup, captionPainted, paintCaptionBand, sectionCaptionReserve, sizeCaptionBand } from './caption.js';
 /** Group metadata key the tree persists under. */
 export const SPLIT_TREE_KEY = 'dashboardTree';
 /**
@@ -250,11 +250,116 @@ export function bindDashboardSplit(api, group, options = {}) {
             writeRect(id, r);
         }
         syncDividers(tree);
+        syncSlabs();
         syncA11y();
     };
     // -- chrome: dividers + insertion line -------------------------------------
     const dividerEls = [];
     let insertion = null;
+    // -- section chrome: slabs and caption bands (0.4.40) ------------------------
+    // The grid board paints a slab per member section (the selection ring, the
+    // caption band); the split board painted none, so a captioned section lost
+    // its band the moment the board switched to split and its children sat bare
+    // in the pane. The same slabs here, minus the corner handle (a divider
+    // resizes a pane); the band is the section's drag handle (beginMemberDrag).
+    const slabEls = new Map();
+    const hoverSlabs = new Set();
+    const syncCaption = (el, id, grp, sectionH) => {
+        const cap = captionOfGroup(grp);
+        let band = el.querySelector(':scope > .axdb-slab-h');
+        if (!cap || !captionPainted(cap, isStatic)) {
+            band === null || band === void 0 ? void 0 : band.remove();
+            hoverSlabs.delete(el);
+            el.classList.remove('axdb-slab--hot');
+            el.removeAttribute('aria-label');
+            el.removeAttribute('role');
+            return;
+        }
+        if (cap.show === 'hover')
+            hoverSlabs.add(el);
+        else {
+            hoverSlabs.delete(el);
+            el.classList.remove('axdb-slab--hot');
+        }
+        const cctx = { rtl, static: isStatic, sectionH };
+        const key = captionKey(cap, cctx);
+        if (band && band.getAttribute('data-key') === key) {
+            sizeCaptionBand(band, cap, sectionH);
+            return;
+        }
+        band === null || band === void 0 ? void 0 : band.remove();
+        band = document.createElement('div');
+        el.prepend(band);
+        const render = options.renderCaption;
+        paintCaptionBand(band, cap, Object.assign(Object.assign(Object.assign({}, cctx), (render ? { render: (host) => render(id, host) } : {})), { onAction: (actionId) => { var _a; return (_a = options.onCaptionAction) === null || _a === void 0 ? void 0 : _a.call(options, id, actionId); } }));
+        band.setAttribute('data-key', key);
+        if (cap.text) {
+            el.setAttribute('role', 'group');
+            el.setAttribute('aria-label', cap.text);
+        }
+        else {
+            el.removeAttribute('role');
+            el.removeAttribute('aria-label');
+        }
+    };
+    const syncSlabs = () => {
+        var _a, _b;
+        if (disposed)
+            return;
+        const layer = htmlLayer();
+        if (!layer)
+            return;
+        const seen = new Set();
+        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : new Set()) {
+            const grp = diagram.getGroup(id);
+            if (!grp || diagram.getNode(id))
+                continue;
+            seen.add(id);
+            let el = slabEls.get(id);
+            if (!el || el.parentElement !== layer) {
+                el === null || el === void 0 ? void 0 : el.remove();
+                el = document.createElement('div');
+                el.className = 'axdb-slab';
+                el.setAttribute('data-slab-id', id);
+                layer.appendChild(el);
+                slabEls.set(id, el);
+            }
+            const p = grp.position;
+            const sz = (_b = grp.size) !== null && _b !== void 0 ? _b : { width: 0, height: 0 };
+            el.style.left = `${p.x}px`;
+            el.style.top = `${p.y}px`;
+            el.style.width = `${sz.width}px`;
+            el.style.height = `${sz.height}px`;
+            el.classList.toggle('axdb-slab--selected', selectedId === id);
+            el.classList.toggle('axdb-slab--static', isStatic);
+            syncCaption(el, id, grp, sz.height);
+        }
+        for (const [id, el] of slabEls) {
+            if (!seen.has(id)) {
+                el.remove();
+                hoverSlabs.delete(el);
+                slabEls.delete(id);
+            }
+        }
+    };
+    /** A `show: 'hover'` band is an overlay that takes no pointer while hidden: the board marks the section under the pointer itself. */
+    const markHotSection = (clientX, clientY) => {
+        if (!hoverSlabs.size)
+            return;
+        for (const el of hoverSlabs) {
+            const r = el.getBoundingClientRect();
+            el.classList.toggle('axdb-slab--hot', clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom);
+        }
+    };
+    const onHoverMove = (e) => {
+        if (disposed || gesture)
+            return;
+        markHotSection(e.clientX, e.clientY);
+    };
+    const onHoverLeave = () => {
+        for (const el of hoverSlabs)
+            el.classList.remove('axdb-slab--hot');
+    };
     const syncDividers = (tree) => {
         const layer = htmlLayer();
         for (const el of dividerEls)
@@ -391,6 +496,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             return;
         selectedId = id;
         syncA11y();
+        syncSlabs();
         (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id);
     };
     let selfPeerRef = null;
@@ -419,23 +525,24 @@ export function bindDashboardSplit(api, group, options = {}) {
         layer.addEventListener('pointerdown', staticGuard);
     };
     const syncA11y = () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (disposed)
             return;
         ensureStaticGuard();
         const order = splitLeaves(paintedTree()).filter((id) => !!diagram.getNode(id));
-        if (selectedId && !order.includes(selectedId))
+        // A selected SECTION (a member group) is not a tab stop, but it is a selection — keep it (0.4.40).
+        if (selectedId && !order.includes(selectedId) && !((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(selectedId))
             selectedId = undefined;
         // No corner handles on a split board: size comes from the dividers. A host
         // that carried the grid's handle (a board switched live) sheds it here.
-        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : [])
-            (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.querySelector(':scope > .axdb-rs')) === null || _c === void 0 ? void 0 : _c.remove();
+        for (const id of (_b = group.members) !== null && _b !== void 0 ? _b : [])
+            (_d = (_c = hostOf(id)) === null || _c === void 0 ? void 0 : _c.querySelector(':scope > .axdb-rs')) === null || _d === void 0 ? void 0 : _d.remove();
         // The painted grip (or none), on every leaf host.
         for (const id of order) {
             const host = hostOf(id);
             const node = diagram.getNode(id);
             if (host && node)
-                syncGrip(host, gripOf(dragHandle), ((_d = node.state) === null || _d === void 0 ? void 0 : _d.locked) !== true && !isStatic && ((_e = node.getMetadata) === null || _e === void 0 ? void 0 : _e.call(node, 'widgetMovable')) !== false);
+                syncGrip(host, gripOf(dragHandle), ((_e = node.state) === null || _e === void 0 ? void 0 : _e.locked) !== true && !isStatic && ((_f = node.getMetadata) === null || _f === void 0 ? void 0 : _f.call(node, 'widgetMovable')) !== false);
         }
         if (focusedId && !order.includes(focusedId))
             focusedId = undefined;
@@ -643,19 +750,24 @@ export function bindDashboardSplit(api, group, options = {}) {
         id: `dashboard-split:${group.id}:${++binderSeq}`,
         priority: 2,
         hitTest(ev, hit) {
-            var _a;
+            var _a, _b, _c, _d, _e, _f;
             if (disposed)
                 return false;
             if (gesture || forwardSlab)
                 return true;
             if (!ownsPress(api.container, diagram, ev, hit))
                 return false;
+            // A press on one of OUR sections' caption bands is ours by the DOM.
+            const chrome = (_c = (_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, '.axdb-slab > .axdb-slab-h');
+            const chromeId = (_d = chrome === null || chrome === void 0 ? void 0 : chrome.parentElement) === null || _d === void 0 ? void 0 : _d.getAttribute('data-slab-id');
+            if (chromeId && ((_e = group.members) !== null && _e !== void 0 ? _e : new Set()).has(chromeId))
+                return true;
             if (hit.node)
-                return ((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(hit.node.id);
+                return ((_f = group.members) !== null && _f !== void 0 ? _f : new Set()).has(hit.node.id);
             return worldInsideBoard(ev.world.x, ev.world.y);
         },
         onPointerDown(ev, hit) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
             if (gesture)
                 return;
             const target = ((_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : null);
@@ -691,6 +803,19 @@ export function bindDashboardSplit(api, group, options = {}) {
             const gripId = (_e = (_d = gripHostOf(target)) === null || _d === void 0 ? void 0 : _d.getAttribute('data-node-id')) !== null && _e !== void 0 ? _e : null;
             const onGrip = !!gripId && ((_f = group.members) !== null && _f !== void 0 ? _f : new Set()).has(gripId);
             const sectionHandle = (_g = target === null || target === void 0 ? void 0 : target.closest) === null || _g === void 0 ? void 0 : _g.call(target, '.axdb-slab > .axdb-rs');
+            // A SECTION's caption band: the press selects the section, a travel
+            // drags it to another pane's edge (beginMemberDrag). An action button
+            // never reaches here — it is pass-through (see ownsPress).
+            const captionBand = (_h = target === null || target === void 0 ? void 0 : target.closest) === null || _h === void 0 ? void 0 : _h.call(target, '.axdb-slab > .axdb-slab-h');
+            const captionId = (_k = (_j = captionBand === null || captionBand === void 0 ? void 0 : captionBand.parentElement) === null || _j === void 0 ? void 0 : _j.getAttribute('data-slab-id')) !== null && _k !== void 0 ? _k : null;
+            if (captionId && ((_l = group.members) !== null && _l !== void 0 ? _l : new Set()).has(captionId)) {
+                selectWidget(captionId);
+                api.render();
+                const src = ev.source;
+                if (!isStatic && typeof (src === null || src === void 0 ? void 0 : src.clientX) === 'number' && typeof (src === null || src === void 0 ? void 0 : src.clientY) === 'number')
+                    beginMemberDrag(captionId, src);
+                return;
+            }
             if ((!hit.node && !onGrip) || sectionHandle) {
                 // OUR OWN empty band or corner handle, and we are a section of a
                 // parent board: select the section there; an edge or the handle
@@ -698,7 +823,7 @@ export function bindDashboardSplit(api, group, options = {}) {
                 // forwards the pointer sequence (the grid binder does the same).
                 const parent = parentPeerOf(api.container, group.id);
                 if ((parent === null || parent === void 0 ? void 0 : parent.selectMember) && (sectionHandle || worldInsideBoard(ev.world.x, ev.world.y))) {
-                    const own = ((_h = sectionHandle === null || sectionHandle === void 0 ? void 0 : sectionHandle.parentElement) === null || _h === void 0 ? void 0 : _h.getAttribute('data-slab-id')) === group.id;
+                    const own = ((_m = sectionHandle === null || sectionHandle === void 0 ? void 0 : sectionHandle.parentElement) === null || _m === void 0 ? void 0 : _m.getAttribute('data-slab-id')) === group.id;
                     parent.selectMember(group.id);
                     if (!isStatic && parent.beginSlabResize) {
                         const f = frame();
@@ -710,7 +835,7 @@ export function bindDashboardSplit(api, group, options = {}) {
                     }
                     return;
                 }
-                (_k = (_j = diagram).clearSelection) === null || _k === void 0 ? void 0 : _k.call(_j);
+                (_p = (_o = diagram).clearSelection) === null || _p === void 0 ? void 0 : _p.call(_o);
                 selectWidget(undefined);
                 api.render();
                 return;
@@ -719,9 +844,9 @@ export function bindDashboardSplit(api, group, options = {}) {
             if (!node)
                 return;
             selectWidget(node.id); // a press selects, whether or not it starts a gesture
-            if (((_l = node.state) === null || _l === void 0 ? void 0 : _l.locked) === true || isStatic)
+            if (((_q = node.state) === null || _q === void 0 ? void 0 : _q.locked) === true || isStatic)
                 return;
-            if (((_m = node.getMetadata) === null || _m === void 0 ? void 0 : _m.call(node, 'widgetMovable')) === false)
+            if (((_r = node.getMetadata) === null || _r === void 0 ? void 0 : _r.call(node, 'widgetMovable')) === false)
                 return;
             // Drag-handle mode: only the handle (the caption strip, a custom element
             // or the painted grip) lifts a widget out — see pressOnDragHandle.
@@ -779,6 +904,8 @@ export function bindDashboardSplit(api, group, options = {}) {
         },
     };
     const unregisterTool = registerTool(tool);
+    api.container.addEventListener('pointermove', onHoverMove);
+    api.container.addEventListener('pointerleave', onHoverLeave);
     // -- a tab torn out of a container on THIS board (0.4.37) --------------------
     // The split board REFUSED every tear-out ("no cells to drop a page into"),
     // so on a split board a tab press was a dead click — no chip, no reorder,
@@ -799,7 +926,7 @@ export function bindDashboardSplit(api, group, options = {}) {
         return true;
     };
     const beginTearOut = (pageId, fromGroupId, ev, plan) => {
-        var _a;
+        var _a, _b, _c, _d;
         if (disposed || isStatic || gesture || tearing)
             return false;
         const from = diagram.getGroup(fromGroupId);
@@ -808,6 +935,9 @@ export function bindDashboardSplit(api, group, options = {}) {
         const tree0 = readTree();
         tearing = true;
         const doc = (_a = api.container.ownerDocument) !== null && _a !== void 0 ? _a : document;
+        const bodyUserSelect = doc.body.style.userSelect;
+        doc.body.style.userSelect = 'none';
+        (_d = (_c = (_b = doc.getSelection) === null || _b === void 0 ? void 0 : _b.call(doc)) === null || _c === void 0 ? void 0 : _c.removeAllRanges) === null || _d === void 0 ? void 0 : _d.call(_c);
         const chip = doc.createElement('div');
         chip.className = 'axdb-drag-chip axdb-tab-chip';
         chip.textContent = plan.label;
@@ -923,6 +1053,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             hideJoin();
             showInsertion(null);
             plan.markDrop(null, null);
+            doc.body.style.userSelect = bodyUserSelect;
             if (disposed) {
                 tearing = false;
                 return;
@@ -981,6 +1112,109 @@ export function bindDashboardSplit(api, group, options = {}) {
         api.render();
         return true;
     };
+    // -- a tab GROUP (or a section) moved by its strip's empty space (0.4.40) ----
+    // The peer answered "no cells to move a section across", so on a split
+    // board a tab group could not be moved at all — only its tabs could leave
+    // it. The board's own drop model moves it: a chip carries its name, the
+    // insertion line marks the pane edge under the pointer, release re-inserts
+    // the group there (dropped on a neighbour's far edge, the two swap sides).
+    // Nothing on the canvas moves until the release; one history step.
+    const beginMemberDrag = (id, ev) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (disposed || isStatic || gesture || tearing)
+            return false;
+        const tree0 = readTree();
+        if (!tree0 || !splitLeaves(tree0).includes(id))
+            return false;
+        const grp = diagram.getGroup(id);
+        if (!grp)
+            return false;
+        tearing = true;
+        const doc = (_a = api.container.ownerDocument) !== null && _a !== void 0 ? _a : document;
+        // The press came through the DOM (a strip's empty space) or a caption
+        // band, not through the renderer's guard: without this the travel
+        // selected every label it crossed (tab names, table cells).
+        (_b = ev.preventDefault) === null || _b === void 0 ? void 0 : _b.call(ev);
+        const bodyUserSelect = doc.body.style.userSelect;
+        doc.body.style.userSelect = 'none';
+        (_e = (_d = (_c = doc.getSelection) === null || _c === void 0 ? void 0 : _c.call(doc)) === null || _d === void 0 ? void 0 : _d.removeAllRanges) === null || _e === void 0 ? void 0 : _e.call(_d);
+        const meta = ((_f = grp.getMetadata('containerWidget')) !== null && _f !== void 0 ? _f : {});
+        const label = typeof meta.title === 'string' && meta.title ? meta.title : grp.name || id;
+        const chip = doc.createElement('div');
+        chip.className = 'axdb-drag-chip axdb-tab-chip';
+        chip.textContent = label;
+        const moveChip = (cx, cy) => {
+            chip.style.left = `${cx + 6}px`;
+            chip.style.top = `${cy + 6}px`;
+        };
+        const down = { x: ev.clientX, y: ev.clientY };
+        let started = false;
+        let target = null;
+        const detach = () => {
+            window.removeEventListener('pointermove', onMove, true);
+            window.removeEventListener('pointerup', onUp, true);
+            window.removeEventListener('pointercancel', onCancel, true);
+            window.removeEventListener('keydown', onKey, true);
+        };
+        const finish = (commit) => {
+            detach();
+            chip.remove();
+            showInsertion(null);
+            tearing = false;
+            doc.body.style.userSelect = bodyUserSelect;
+            if (disposed || !started)
+                return;
+            const t = commit ? target : null;
+            if (!t) {
+                api.renderNow();
+                fire({ type: 'cancel', kind: 'move', nodeId: id, changed: false });
+                return;
+            }
+            const side = rtl && (t.side === 'left' || t.side === 'right') ? (t.side === 'left' ? 'right' : 'left') : t.side;
+            const after = normalizeSplit(insertSplitLeaf(tree0, id, targetRef(t), side));
+            const changed = JSON.stringify(after) !== JSON.stringify(normalizeSplit(tree0));
+            const paint = () => {
+                if (disposed)
+                    return;
+                project(readTree());
+                api.renderNow();
+            };
+            const p = changed ? commitTree(tree0, after) : undefined;
+            paint();
+            if (p && typeof p.then === 'function')
+                void p.then(paint, () => undefined);
+            if (changed)
+                live.announce(`${label} moved ${side === 'left' || side === 'top' ? 'before' : 'after'} ${targetName(t)}`, 'polite', true);
+            fire({ type: changed ? 'commit' : 'cancel', kind: 'move', nodeId: id, changed });
+        };
+        const onMove = (e) => {
+            if (disposed)
+                return finish(false);
+            if (!started) {
+                if (Math.abs(e.clientX - down.x) + Math.abs(e.clientY - down.y) < DRAG_THRESHOLD)
+                    return;
+                started = true;
+                doc.body.appendChild(chip);
+            }
+            moveChip(e.clientX, e.clientY);
+            const w = toWorld(e.clientX, e.clientY);
+            target = worldInsideBoard(w.x, w.y) ? dropTargetAt(tree0, w.x, w.y, id) : null;
+            showInsertion(target ? insertionRect(target.rect, target.side) : null);
+            chip.classList.toggle('axdb-out', !target);
+            api.render();
+        };
+        const onUp = () => finish(true);
+        const onCancel = () => finish(false);
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                finish(false);
+        };
+        window.addEventListener('pointermove', onMove, true);
+        window.addEventListener('pointerup', onUp, true);
+        window.addEventListener('pointercancel', onCancel, true);
+        window.addEventListener('keydown', onKey, true);
+        return true;
+    };
     // -- palette drag-in --------------------------------------------------------
     const beginPaletteDrag = (node, spec, event) => {
         var _a;
@@ -1427,6 +1661,12 @@ export function bindDashboardSplit(api, group, options = {}) {
             for (const el of dividerEls)
                 el.remove();
             dividerEls.length = 0;
+            api.container.removeEventListener('pointermove', onHoverMove);
+            api.container.removeEventListener('pointerleave', onHoverLeave);
+            for (const el of slabEls.values())
+                el.remove();
+            slabEls.clear();
+            hoverSlabs.clear();
             insertion === null || insertion === void 0 ? void 0 : insertion.remove();
             insertion = null;
             api.container.style.cursor = '';
@@ -1455,8 +1695,9 @@ export function bindDashboardSplit(api, group, options = {}) {
         resizeMemberBy: () => ({ changed: false }),
         // A torn-out page becomes a PANE (0.4.37) — see beginTearOut.
         tearOutMember: (pageId, fromGroupId, ev, plan) => beginTearOut(pageId, fromGroupId, ev, plan),
-        // …and it has no cells to move a section across: a strip press stays a selection.
-        dragMember: () => false,
+        // A tab group (or a section) moved by its strip's empty space becomes a
+        // pane elsewhere (0.4.40) — see beginMemberDrag.
+        dragMember: (id, ev) => beginMemberDrag(id, ev),
         containsWorld: (x, y) => worldInsideBoard(x, y),
         containsWorldExtended: (x, y) => worldInsideBoard(x, y),
         frameArea: () => {

package/src/lib/dashboard-kit/tabs.js

@@ -57,12 +57,20 @@ onDrag) {
     // cover it completely, so without this there is nowhere to press to select
     // it — and an unselected section shows no corner handle, which made the
     // container impossible to resize by hand.
-    strip.onpointerdown = (e) => {
+    // A real listener, not the `onpointerdown` IDL attribute: the attribute is
+    // not an event handler under jsdom, so the strip's empty-space press — the
+    // whole group's drag handle — could never be driven by a spec. Repaints
+    // replace the previous listener rather than stacking one per paint.
+    const withSelect = strip;
+    if (withSelect.__axdbSelect)
+        strip.removeEventListener('pointerdown', withSelect.__axdbSelect);
+    withSelect.__axdbSelect = (e) => {
         var _a;
         if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('.axdb-tab'))
             return;
         onSelectContainer === null || onSelectContainer === void 0 ? void 0 : onSelectContainer(e);
     };
+    strip.addEventListener('pointerdown', withSelect.__axdbSelect);
     for (const p of pages) {
         const b = doc.createElement('button');
         b.type = 'button';