@grafloria/element 0.4.30 → 0.4.31

package/package.json

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

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

@@ -761,57 +761,157 @@ export function createDashboardHandle(ctx) {
                         new RegisterWidgetCommand(born, 'register'),
                     ]),
                 ];
-                if (remaining.length > 0)
-                    return { move, collapse: [] };
-                // The last page left: the container closes. Its registry goes FIRST
-                // so that on undo it comes back AFTER the group and its slab do.
-                let fromSlot = -1;
-                const gone = {
+                return { move, collapse: remaining.length > 0 ? [] : collapseOf(boardId) };
+            },
+            joinTargets: [...ctx.layoutOf.keys()].filter((id) => { var _a, _b; return id !== containerId && id !== pageId && ((_a = ctx.layoutOf.get(id)) !== null && _a !== void 0 ? _a : (_b = specById.get(id)) === null || _b === void 0 ? void 0 : _b.layout) === 'tabs' && !!model.getGroup(id) && !insidePage(id); }),
+            dropIndex: (targetId, cx, cy) => {
+                const strip = ctx.tabStrips.get(targetId);
+                const n = liveCount(targetId);
+                if (!strip)
+                    return n;
+                const r = strip.getBoundingClientRect();
+                if (r.width === 0 || cx < r.left || cx > r.right || cy < r.top || cy > r.bottom)
+                    return n;
+                const rtl = strip.getAttribute('dir') === 'rtl';
+                let i = 0;
+                for (const t of Array.from(strip.querySelectorAll('.axdb-tab'))) {
+                    const tr = t.getBoundingClientRect();
+                    const mid = tr.left + tr.width / 2;
+                    if (rtl ? cx < mid : cx > mid)
+                        i++;
+                    else
+                        break;
+                }
+                return i;
+            },
+            markDrop: (targetId, index) => {
+                for (const [id, el] of ctx.tabStrips) {
+                    const on = id === targetId;
+                    el.classList.toggle('axdb-tabs--drop', on);
+                    const tabs = Array.from(el.querySelectorAll('.axdb-tab'));
+                    tabs.forEach((t, i) => t.classList.toggle('axdb-tab--drop-before', on && index !== null && i === index));
+                    el.classList.toggle('axdb-tabs--drop-end', on && index !== null && index >= tabs.length);
+                }
+            },
+            join: (targetId, index, boardId) => {
+                var _a;
+                const target = (_a = ctx.boardGroups.get(targetId)) !== null && _a !== void 0 ? _a : model.getGroup(targetId);
+                const targetSpec = specById.get(targetId);
+                if (!target || !targetSpec)
+                    return { move: [], collapse: [] };
+                const prevActive = ctx.activeTab.get(targetId);
+                const cwOf = (g) => { var _a; return ((_a = g.getMetadata('containerWidget')) !== null && _a !== void 0 ? _a : {}); };
+                let slot = -1;
+                const joined = {
                     register: () => {
                         var _a;
-                        const live = model.getGroup(containerId);
-                        if (!live)
-                            return;
-                        ctx.boardGroups.set(containerId, live);
-                        ctx.layoutOf.set(containerId, 'tabs');
-                        ctx.viewOfBoard.set(containerId, viewId);
-                        if (fromSpec)
-                            specById.set(containerId, fromSpec);
-                        const arr = ctx.boardWidgets.get(boardId);
-                        if (arr && fromSpec && !arr.some((w) => w.id === containerId)) {
-                            arr.splice(fromSlot < 0 ? arr.length : Math.min(fromSlot, arr.length), 0, fromSpec);
+                        viewOfWidget.set(pageId, targetId);
+                        if (fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.widgets) {
+                            const i = fromSpec.widgets.findIndex((p) => p.id === pageId);
+                            if (i >= 0) {
+                                slot = i;
+                                fromSpec.widgets.splice(i, 1);
+                            }
+                        }
+                        targetSpec.widgets = (_a = targetSpec.widgets) !== null && _a !== void 0 ? _a : [];
+                        if (!targetSpec.widgets.some((p) => p.id === pageId)) {
+                            targetSpec.widgets.splice(Math.max(0, Math.min(index, targetSpec.widgets.length)), 0, pageSpec);
                         }
-                        (_a = ctx.attachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+                        ctx.boardWidgets.set(targetId, targetSpec.widgets);
+                        // The moved tab is the one showing, as it is in VS Code.
+                        ctx.activeTab.set(targetId, pageId);
+                        targetSpec.active = pageId;
+                        target.setMetadata('containerWidget', Object.assign(Object.assign({}, cwOf(target)), { active: pageId }));
                     },
                     unregister: () => {
-                        var _a;
-                        (_a = ctx.detachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
-                        ctx.boardGroups.delete(containerId);
-                        ctx.layoutOf.delete(containerId);
-                        ctx.viewOfBoard.delete(containerId);
-                        specById.delete(containerId);
-                        const arr = ctx.boardWidgets.get(boardId);
-                        if (arr) {
-                            const i = arr.findIndex((w) => w.id === containerId);
-                            if (i >= 0) {
-                                fromSlot = i;
-                                arr.splice(i, 1);
-                            }
+                        viewOfWidget.set(pageId, containerId);
+                        if (targetSpec.widgets) {
+                            const i = targetSpec.widgets.findIndex((p) => p.id === pageId);
+                            if (i >= 0)
+                                targetSpec.widgets.splice(i, 1);
+                        }
+                        if ((fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.widgets) && !fromSpec.widgets.some((p) => p.id === pageId)) {
+                            fromSpec.widgets.splice(slot < 0 ? fromSpec.widgets.length : Math.min(slot, fromSpec.widgets.length), 0, pageSpec);
+                        }
+                        if (prevActive) {
+                            ctx.activeTab.set(targetId, prevActive);
+                            targetSpec.active = prevActive;
+                            target.setMetadata('containerWidget', Object.assign(Object.assign({}, cwOf(target)), { active: prevActive }));
                         }
                     },
                 };
-                return {
-                    move,
-                    collapse: [
-                        new SequenceCommand('Close empty tab container', [
-                            new RegisterWidgetCommand(gone, 'unregister'),
-                            new RemoveFromGroupCommand(boardId, containerId),
-                            new RemoveGroupCommand(containerId),
-                        ]),
-                    ],
-                };
+                const move = [
+                    new SequenceCommand('Move tab', [
+                        new RemoveFromGroupCommand(containerId, pageId),
+                        new AddToGroupCommand(targetId, pageId),
+                        new RegisterWidgetCommand(joined, 'register'),
+                    ]),
+                ];
+                return { move, collapse: remaining.length > 0 ? [] : collapseOf(boardId) };
             },
         };
+        /** A tab container nested inside the page being moved cannot be its target. */
+        function insidePage(id) {
+            let cur = model.getGroup(id);
+            for (let i = 0; cur && i < 32; i++) {
+                if (cur.id === pageId)
+                    return true;
+                cur = cur.parentGroupId ? model.getGroup(cur.parentGroupId) : undefined;
+            }
+            return false;
+        }
+        function liveCount(id) {
+            var _a, _b;
+            return [...((_b = (_a = model.getGroup(id)) === null || _a === void 0 ? void 0 : _a.members) !== null && _b !== void 0 ? _b : [])].filter((m) => !!model.getGroup(m)).length;
+        }
+        /**
+         * The last page left: the container closes. Its registry goes FIRST so
+         * that on undo it comes back AFTER the group and its slab do.
+         */
+        function collapseOf(boardId) {
+            let fromSlot = -1;
+            const gone = {
+                register: () => {
+                    var _a;
+                    const live = model.getGroup(containerId);
+                    if (!live)
+                        return;
+                    ctx.boardGroups.set(containerId, live);
+                    ctx.layoutOf.set(containerId, 'tabs');
+                    ctx.viewOfBoard.set(containerId, viewId);
+                    if (fromSpec)
+                        specById.set(containerId, fromSpec);
+                    const arr = ctx.boardWidgets.get(boardId);
+                    if (arr && fromSpec && !arr.some((w) => w.id === containerId)) {
+                        arr.splice(fromSlot < 0 ? arr.length : Math.min(fromSlot, arr.length), 0, fromSpec);
+                    }
+                    (_a = ctx.attachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+                },
+                unregister: () => {
+                    var _a;
+                    (_a = ctx.detachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+                    ctx.boardGroups.delete(containerId);
+                    ctx.layoutOf.delete(containerId);
+                    ctx.viewOfBoard.delete(containerId);
+                    specById.delete(containerId);
+                    const arr = ctx.boardWidgets.get(boardId);
+                    if (arr) {
+                        const i = arr.findIndex((w) => w.id === containerId);
+                        if (i >= 0) {
+                            fromSlot = i;
+                            arr.splice(i, 1);
+                        }
+                    }
+                },
+            };
+            return [
+                new SequenceCommand('Close empty tab container', [
+                    new RegisterWidgetCommand(gone, 'unregister'),
+                    new RemoveFromGroupCommand(boardId, containerId),
+                    new RemoveGroupCommand(containerId),
+                ]),
+            ];
+        }
     };
     /** Bookkeeping closures for one widget, shared by the add and remove
      *  commands (and applied synchronously by the handle — idempotent). */

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

@@ -538,6 +538,26 @@ export interface TearOutPlan {
         move: Command[];
         collapse: Command[];
     };
+    /**
+     * The tab containers the page may JOIN instead of forming a group of its
+     * own — VS Code's editor dragged from one group into another. Every one it
+     * may legally enter (not the container it left, none inside itself); the
+     * board hit-tests them against the pointer, and a release over one joins.
+     */
+    joinTargets: string[];
+    /** The tab index a release at this CLIENT point means for `targetId`: over the strip, between the tabs there; over the body, the end. */
+    dropIndex(targetId: string, clientX: number, clientY: number): number;
+    /** Paint (or, with null, clear) the insertion mark on `targetId`'s strip. */
+    markDrop(targetId: string | null, index: number | null): void;
+    /**
+     * The commands for joining `targetId` at `index`: the page becomes its tab
+     * — and the active one — and the container it left closes when it was the
+     * last page. No cell is taken on any board.
+     */
+    join(targetId: string, index: number, boardId: string): {
+        move: Command[];
+        collapse: Command[];
+    };
 }
 /** A torn-out page never arrives shorter than this: a strip with no room under it is not a group. */
 export declare const TEAR_OUT_MIN_ROWS = 2;
@@ -559,6 +579,16 @@ interface AdoptedLeg {
         x: number;
         y: number;
     }): void;
+    /**
+     * Take the tile OFF the board while the pointer is somewhere the board is
+     * not the target (over a group the page will join instead); the tiles it
+     * displaced come home. `enter` puts it back at the pointer.
+     */
+    leave(): void;
+    enter(world: {
+        x: number;
+        y: number;
+    }): void;
     /** Undo the adoption: target board back to its pre-entry layout. */
     abort(): void;
     /**

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

@@ -2314,8 +2314,29 @@ export function bindDashboardGrid(api, group, options = {}) {
                     project();
                 syncPlaceholder();
             },
+            leave: () => {
+                if (!engine.getItem(node.id))
+                    return;
+                engine.remove(node.id); // displaced tiles come home (gesture memory)
+                lastWant = null;
+                project();
+                syncPlaceholder();
+            },
+            enter: (w) => {
+                if (!engine.getItem(node.id) && !engine.add({ id: node.id, x: 0, y: engine.rows(), w: span.w, h: hNatural }))
+                    return;
+                const item = engine.getItem(node.id);
+                if (!item)
+                    return;
+                const cell = wantedCell(w.x, w.y, item.w, opts.fit === 'shrink' ? hNatural : item.h);
+                lastWant = cell;
+                place(cell, item.w);
+                project();
+                syncPlaceholder();
+            },
             abort: () => {
-                engine.remove(node.id);
+                if (engine.getItem(node.id))
+                    engine.remove(node.id);
                 engine.cancelGesture(); // pre-entry layout, memory cleared
                 adoptedGhostId = null;
                 disarmGlideSoon();
@@ -2920,6 +2941,48 @@ export function bindDashboardGrid(api, group, options = {}) {
         chip.className = 'axdb-drag-chip axdb-tab-chip';
         chip.textContent = plan.label;
         doc.body.appendChild(chip);
+        // Over ANOTHER tab container the page joins it instead of taking a cell:
+        // the tile leaves the board (its displaced tiles come home), the target's
+        // frame lights up and its strip marks where the tab will go.
+        const layer = htmlLayer();
+        const targets = plan.joinTargets
+            .map((id) => diagram.getGroup(id))
+            .filter((g) => !!g && g.id !== fromGroupId);
+        const targetAt = (wx, wy) => { var _a; return (_a = targets.find((t) => worldInsideGroup(t, wx, wy))) !== null && _a !== void 0 ? _a : null; };
+        let over = null;
+        let joinEl = null;
+        const showJoin = (g) => {
+            if (!layer)
+                return;
+            if (!joinEl) {
+                joinEl = doc.createElement('div');
+                joinEl.className = 'axdb-join';
+                layer.prepend(joinEl);
+            }
+            const sz = sizeOf(g);
+            joinEl.style.left = `${g.position.x}px`;
+            joinEl.style.top = `${g.position.y}px`;
+            joinEl.style.width = `${sz.width}px`;
+            joinEl.style.height = `${sz.height}px`;
+        };
+        const hideJoin = () => {
+            joinEl === null || joinEl === void 0 ? void 0 : joinEl.remove();
+            joinEl = null;
+            plan.markDrop(null, null);
+        };
+        const setOver = (g, world) => {
+            if (g === over)
+                return;
+            over = g;
+            if (g) {
+                leg.leave();
+                showJoin(g);
+            }
+            else {
+                hideJoin();
+                leg.enter(world);
+            }
+        };
         const moveChip = (cx, cy) => {
             chip.style.left = `${cx + 6}px`;
             chip.style.top = `${cy + 6}px`;
@@ -2941,27 +3004,48 @@ export function bindDashboardGrid(api, group, options = {}) {
             moveChip(e.clientX, e.clientY);
             const world = toWorld(e.clientX, e.clientY);
             const home = worldInsideGroup(from, world.x, world.y);
+            const target = home ? null : targetAt(world.x, world.y);
+            setOver(target, world);
             // Over its own container it goes home: a tab dragged around its own
             // strip must not tear itself out.
-            chip.classList.toggle('axdb-out', home || !worldInsideBoardGrace(world.x, world.y));
-            if (!home)
+            chip.classList.toggle('axdb-out', home || (!target && !worldInsideBoardGrace(world.x, world.y)));
+            if (target)
+                plan.markDrop(target.id, plan.dropIndex(target.id, e.clientX, e.clientY));
+            else if (!home)
                 leg.move(world);
             api.render();
         };
         const finish = (commit) => {
-            var _a, _b;
+            var _a, _b, _c;
             detach();
             chip.remove();
+            hideJoin();
             tearing = null;
             if (disposed)
                 return;
             const world = toWorld(last.x, last.y);
             const home = worldInsideGroup(from, world.x, world.y);
+            const target = commit && !home ? targetAt(world.x, world.y) : null;
+            if (target) {
+                // JOIN: no cell on this board — the leg is abandoned (its displaced
+                // tiles are already home) and the page becomes the target's tab.
+                const index = plan.dropIndex(target.id, last.x, last.y);
+                leg.abort();
+                const planned = plan.join(target.id, index, group.id);
+                const collapse = planned.collapse.length > 0 ? [...planRemovalOf(fromGroupId), ...planned.collapse] : [];
+                const changed = execute('Move tab', [...planned.move, ...collapse]);
+                disarmGlideSoon();
+                enforceBoardHeight();
+                persistLayouts();
+                api.renderNow();
+                (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'commit', kind: 'move', nodeId: pageId, changed });
+                return;
+            }
             if (!commit || home || !worldInsideBoardGrace(world.x, world.y)) {
                 leg.abort();
                 disarmGlideSoon();
                 api.renderNow();
-                (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'cancel', kind: 'move', nodeId: pageId, changed: false });
+                (_b = options.onGesture) === null || _b === void 0 ? void 0 : _b.call(options, { type: 'cancel', kind: 'move', nodeId: pageId, changed: false });
                 return;
             }
             const fin = leg.finalize();
@@ -2980,7 +3064,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             enforceBoardHeight();
             persistLayouts();
             api.renderNow();
-            (_b = options.onGesture) === null || _b === void 0 ? void 0 : _b.call(options, { type: 'commit', kind: 'move', nodeId: pageId, changed });
+            (_c = options.onGesture) === null || _c === void 0 ? void 0 : _c.call(options, { type: 'commit', kind: 'move', nodeId: pageId, changed });
         };
         const onUp = () => finish(true);
         const onCancel = () => finish(false);

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

@@ -132,6 +132,28 @@ const CSS = `
     box-shadow: 0 0 0 1px rgba(236, 238, 244, .16);
   }
 }
+/* A tab held over ANOTHER group: it will join that group, not the board. The
+   group's frame lights up, and its strip marks the slot the tab will take —
+   a bar before the tab it lands in front of, or after the last one. */
+.grafloria-html-layer > .axdb-join {
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 2px dashed var(--axdb-accent, #3b52d9);
+  background: var(--axdb-accent-soft, rgba(59, 82, 217, .08));
+  border-radius: var(--axdb-rs-radius, 3px);
+}
+.axdb-tabs.axdb-tabs--drop { box-shadow: inset 0 -2px 0 var(--axdb-accent, #3b52d9); }
+.axdb-tab.axdb-tab--drop-before { position: relative; }
+.axdb-tab.axdb-tab--drop-before::before {
+  content: ""; position: absolute; left: -3px; top: 4px; bottom: 4px; width: 3px;
+  border-radius: 2px; background: var(--axdb-accent, #3b52d9);
+}
+.axdb-tabs.axdb-tabs--drop-end::after {
+  content: ""; display: inline-block; width: 3px; height: 18px; margin: 0 4px;
+  border-radius: 2px; background: var(--axdb-accent, #3b52d9); vertical-align: middle; align-self: center;
+}
 
 /* ===========================================================================
    BUILT-IN WIDGET CARDS — what widgets.ts paints when a page writes no