@grafloria/element 0.4.40 → 0.4.42

package/package.json

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

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/grid-binder.js

@@ -3453,6 +3453,12 @@ export function bindDashboardGrid(api, group, options = {}) {
         const ROOT_TOP = 20;
         const ROOT_BOTTOM = 20;
         const ROOT_SIDE = 40;
+        // THE EDGE BANDS ARE A FIFTH OF THE BODY — Dockview's activation size, not
+        // VS Code's third. Two thirds of every group read as "beside" under the
+        // thirds, and the user, putting a page back into the panel it came from,
+        // never found the "into": "close to the edge means beside it, the content
+        // area means inside, the header means a new tab" (0.4.42).
+        const EDGE_BAND = 0.2;
         const visibleFrame = () => {
             const rect = api.container.getBoundingClientRect();
             const o = toWorld(rect.left, rect.top);
@@ -3598,7 +3604,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 const bodyH = Math.max(1, f.height - stripH);
                 const rx = Math.min(1, Math.max(0, (world.x - f.x) / Math.max(1, f.width)));
                 const ry = Math.min(1, Math.max(0, (world.y - f.y - stripH) / bodyH));
-                if (rx >= 1 / 3 && rx <= 2 / 3 && ry >= 1 / 3 && ry <= 2 / 3)
+                if (rx >= EDGE_BAND && rx <= 1 - EDGE_BAND && ry >= EDGE_BAND && ry <= 1 - EDGE_BAND)
                     return { kind: 'join', target };
                 const d = [['left', rx], ['right', 1 - rx], ['top', ry], ['bottom', 1 - ry]];
                 d.sort((p, q) => p[1] - q[1]);
@@ -3728,6 +3734,24 @@ export function bindDashboardGrid(api, group, options = {}) {
             placeholder = null;
             return ok;
         };
+        /** The band a dock is promised: the cell it takes — a BOTTOM dock's lies past the last row, so its tint sits on the board's last rows instead. */
+        const dockOverlayRect = (z) => {
+            const cell = z.side === 'bottom' ? Object.assign(Object.assign({}, z.cell), { y: Math.max(0, z.cell.y - z.cell.h) }) : z.cell;
+            return cellToRect(cell, frame(), geom(), rows());
+        };
+        /** The dock, applied for real at the release: the ghost takes the band, every member group is pushed, a top dock inserts rows. */
+        const realizeDock = (z, world) => {
+            const l = ensureLeg(world, null);
+            if (!l)
+                return false;
+            unlockGroups();
+            l.place(z.cell);
+            insertRows(z.cell, l);
+            project();
+            placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
+            placeholder = null;
+            return true;
+        };
         let zone = { kind: 'board' };
         let key = zoneKey(zone);
         const applyZone = (z, world) => {
@@ -3743,10 +3767,17 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
             undoSplitPreview();
             undoInsertRows();
-            if (z.kind !== 'root')
-                relockGroups();
+            relockGroups();
             plan.markDrop(null, null);
             hideOverlay();
+            // A PREVIEW IS AN OVERLAY. A split and a dock used to be applied LIVE
+            // while the pointer hovered — the target halved and moved to its other
+            // half, a top dock shoved every tile down — so the very group the user
+            // was entering jumped away from under the pointer (the fluid demo's
+            // side panel went off the screen in one frame as a page came back to
+            // it). VS Code, Dockview and Golden Layout tint the half or the band and
+            // move nothing until the drop; so does this now: the layout stays where
+            // the user sees it, and the halving or the row insert happens on release.
             switch (z.kind) {
                 case 'strip':
                     leg === null || leg === void 0 ? void 0 : leg.leave();
@@ -3757,30 +3788,14 @@ export function bindDashboardGrid(api, group, options = {}) {
                     leg === null || leg === void 0 ? void 0 : leg.leave();
                     showOverlay(frameOfGroup(z.target));
                     break;
-                case 'split': {
-                    if (!previewSplit(z, world)) {
-                        zone = { kind: 'join', target: z.target };
-                        key = zoneKey(zone);
-                        leg === null || leg === void 0 ? void 0 : leg.leave();
-                        showOverlay(frameOfGroup(z.target));
-                        break;
-                    }
+                case 'split':
+                    leg === null || leg === void 0 ? void 0 : leg.leave(); // the ghost leaves first, so the half is measured on the relaxed board
                     showOverlay(cellToRect(z.born, frame(), geom(), rows()));
                     break;
-                }
-                case 'root': {
-                    const l = ensureLeg(world, null);
-                    if (l) {
-                        unlockGroups();
-                        l.place(z.cell);
-                        insertRows(z.cell, l);
-                        project();
-                        placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
-                        placeholder = null;
-                        showOverlay(cellToRect(z.cell, frame(), geom(), rows()));
-                    }
+                case 'root':
+                    leg === null || leg === void 0 ? void 0 : leg.leave();
+                    showOverlay(dockOverlayRect(z));
                     break;
-                }
                 case 'reorder':
                     leg === null || leg === void 0 ? void 0 : leg.leave();
                     plan.markDrop(fromGroupId, z.index);
@@ -3813,7 +3828,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             applyZone(z, world);
             // Dimmed = a release here does nothing: home, off the board, or a board
             // that refused the ghost (bounded and full).
-            chip.classList.toggle('axdb-out', zone.kind === 'home' || zone.kind === 'off' || (zone.kind === 'root' && !leg) || (zone.kind === 'board' && (!leg || landingHidden())));
+            chip.classList.toggle('axdb-out', zone.kind === 'home' || zone.kind === 'off' || (zone.kind === 'board' && (!leg || landingHidden())));
             api.render();
         };
         const done = (changed, kind) => {
@@ -3864,11 +3879,18 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
             if (z.kind === 'split') {
                 // SPLIT: the target keeps one half of its cell, the page's new group the
-                // other. The preview already holds both in the engine; commit them.
-                if (!split || split.id !== z.target.id || zoneKey(zone) !== zoneKey(z))
-                    applyZone(z, world);
-                hideOverlay(); // a re-applied zone repaints its preview; the release is not a preview
+                // other. The hover only tinted the half; the halving happens NOW.
+                hideOverlay();
                 plan.markDrop(null, null);
+                if (!previewSplit(z, world)) {
+                    // The half cannot be taken (a bounded board with no room for the
+                    // ghost): the page joins the target instead, as it would have had
+                    // the target been too small to halve.
+                    leg === null || leg === void 0 ? void 0 : leg.abort();
+                    const planned = plan.join(z.target.id, plan.dropIndex(z.target.id, last.x, last.y), group.id);
+                    done(execute('Move tab', [...planned.move, ...planned.collapse]), 'commit');
+                    return;
+                }
                 const fin = (_b = leg === null || leg === void 0 ? void 0 : leg.finalize()) !== null && _b !== void 0 ? _b : null;
                 const it = engine.getItem(z.target.id);
                 const before = split;
@@ -3892,8 +3914,11 @@ export function bindDashboardGrid(api, group, options = {}) {
                 done(changed, 'commit');
                 return;
             }
-            // ROOT DOCK or a free cell on the board: the leg sits where it will land.
-            if (zoneKey(zone) !== zoneKey(z))
+            // ROOT DOCK: the hover only tinted the band; the ghost takes it NOW. A
+            // free cell on the board: the leg already sits where it will land.
+            if (z.kind === 'root')
+                realizeDock(z, world);
+            else if (zoneKey(zone) !== zoneKey(z))
                 applyZone(z, world);
             hideOverlay(); // a re-applied zone repaints its preview; the release is not a preview
             plan.markDrop(null, null);