@grafloria/element 0.4.29 → 0.4.30

package/package.json

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

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

@@ -43,7 +43,7 @@
  * round-trips with no extra work — same as every other kit.
  */
 import { GroupModel, NodeModel, type GridColumnLayout } from '@grafloria/engine';
-import { type DashboardGridHandle, type DashboardGridOptions, type DashboardResponsiveOptions } from './grid-binder.js';
+import { type DashboardGridHandle, type TearOutPlan, type DashboardGridOptions, type DashboardResponsiveOptions } from './grid-binder.js';
 import type { DragHandleOption } from './grid-binder.js';
 import type { SplitNode } from './split-layout.js';
 import type { SectionCaption } from './caption.js';
@@ -587,6 +587,16 @@ export interface DashboardHandleContext {
     tabStrips: Map<string, HTMLElement>;
     /** Set by finalize: re-lay a tab container's pages and repaint its strip. */
     syncTabs?: (containerId: string) => void;
+    /**
+     * Tab-container runtime hooks (attachTabsRuntime): a container created or
+     * removed AFTER boot — a page torn out into a group of its own, a container
+     * closed because its last page left — registers and unregisters through
+     * these, on execute and on undo alike.
+     */
+    attachTabsContainer?: (containerId: string) => void;
+    detachTabsContainer?: (containerId: string) => void;
+    /** The plan that makes a torn-out page a one-tab group of its own (the handle builder owns the specs and the registry). */
+    tearOutPlan?: (containerId: string, pageId: string) => TearOutPlan | null;
     /** Set by finalize: the user's `onTabChange`, so the handle can fire it. */
     onTabChange?: (containerId: string, pageId: string, viewId: string) => void;
     /** Set by finalize: re-bind a VIEW's board under the given layout (setLayout). */

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

@@ -43,7 +43,7 @@
  * round-trips with no extra work — same as every other kit.
  */
 import { __awaiter, __rest } from "tslib";
-import { BatchCommand, BringNodeToFrontCommand, Command, GroupModel, NodeModel, RemoveFromGroupCommand, RemoveGroupCommand, RemoveNodeCommand, SendNodeToBackCommand, } from '@grafloria/engine';
+import { BatchCommand, BringNodeToFrontCommand, Command, GroupModel, NodeModel, AddGroupCommand, AddToGroupCommand, RemoveFromGroupCommand, RemoveGroupCommand, RemoveNodeCommand, SendNodeToBackCommand, } from '@grafloria/engine';
 import { bindDashboardGrid, parentPeerOf, } from './grid-binder.js';
 import { bindDashboardSplit, SPLIT_TREE_KEY } from './split-binder.js';
 import { gridItemFromCell } from './grid-mapping.js';
@@ -341,7 +341,7 @@ function assignCells(widgets, columns) {
  */
 const cssEscape = (v) => typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(v) : v.replace(/"/g, '\\"');
 export function attachTabsRuntime(ctx, model, container, handle) {
-    var _a, _b, _c;
+    var _a;
     // Pages come from LIVE membership, in the authored order, with anything that
     // arrived later on the end. Reading the authored spec instead meant a page
     // that LEFT the container kept its tab — a tab pointing at nothing, which is
@@ -371,14 +371,16 @@ export function attachTabsRuntime(ctx, model, container, handle) {
      * with no pages has nothing to show.
      */
     const tearOut = (containerId, pageId, ev) => {
-        var _a, _b, _c;
+        var _a;
         if (!container)
             return false;
-        const pages = pagesOf(containerId);
-        if (pages.length <= 1)
+        if (!pagesOf(containerId).some((p) => p.id === pageId))
             return false;
-        const label = (_b = (_a = pages.find((p) => p.id === pageId)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : pageId;
-        return ((_c = parentPeerOf(container, containerId)) === null || _c === void 0 ? void 0 : _c.tearOutMember(pageId, containerId, label, ev)) === true;
+        const peer = parentPeerOf(container, containerId);
+        const plan = (_a = ctx.tearOutPlan) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId, pageId);
+        if (!peer || !plan)
+            return false;
+        return peer.tearOutMember(pageId, containerId, ev, plan);
     };
     const paintStrip = (id, f, h, pages, active) => {
         var _a, _b, _c;
@@ -456,13 +458,18 @@ export function attachTabsRuntime(ctx, model, container, handle) {
     };
     ctx.syncTabs = sync;
     ctx.subscriptions = (_a = ctx.subscriptions) !== null && _a !== void 0 ? _a : [];
-    for (const [id, cg] of ctx.boardGroups) {
-        if (!isTabs(id))
-            continue;
+    const subsOf = new Map();
+    const attach = (id) => {
+        var _a, _b, _c, _d, _e, _f;
+        const cg = (_a = ctx.boardGroups.get(id)) !== null && _a !== void 0 ? _a : model.getGroup(id);
+        if (!cg || subsOf.has(id))
+            return;
+        if (((_b = ctx.layoutOf.get(id)) !== null && _b !== void 0 ? _b : (_c = ctx.specById.get(id)) === null || _c === void 0 ? void 0 : _c.layout) !== 'tabs')
+            return;
         const pages = pagesOf(id);
-        if (!ctx.activeTab.has(id)) {
+        if (!ctx.activeTab.has(id) && pages.length > 0) {
             const meta = cg.getMetadata('containerWidget');
-            const want = (_c = (_b = ctx.specById.get(id)) === null || _b === void 0 ? void 0 : _b.active) !== null && _c !== void 0 ? _c : meta === null || meta === void 0 ? void 0 : meta.active;
+            const want = (_e = (_d = ctx.specById.get(id)) === null || _d === void 0 ? void 0 : _d.active) !== null && _e !== void 0 ? _e : meta === null || meta === void 0 ? void 0 : meta.active;
             ctx.activeTab.set(id, want && pages.some((p) => p.id === want) ? want : pages[0].id);
             if ((meta === null || meta === void 0 ? void 0 : meta.tabs) && !ctx.tabsOf.has(id))
                 ctx.tabsOf.set(id, meta.tabs);
@@ -470,12 +477,59 @@ export function attachTabsRuntime(ctx, model, container, handle) {
         // Re-lay the pages whenever the parent moves or resizes the container —
         // and whenever a page joins or leaves, so the strip always shows the pages
         // that are actually there.
+        const offs = [];
         for (const ev of ['bounds:changed', 'member:added', 'member:removed']) {
             const off = cg.on(ev, (() => sync(id)));
             if (typeof off === 'function')
-                ctx.subscriptions.push(off);
+                offs.push(off);
         }
+        subsOf.set(id, offs);
+        (_f = ctx.subscriptions) === null || _f === void 0 ? void 0 : _f.push(() => detach(id));
         sync(id);
+    };
+    const detach = (id) => {
+        var _a, _b;
+        for (const off of (_a = subsOf.get(id)) !== null && _a !== void 0 ? _a : [])
+            off();
+        subsOf.delete(id);
+        (_b = ctx.tabStrips.get(id)) === null || _b === void 0 ? void 0 : _b.remove();
+        ctx.tabStrips.delete(id);
+    };
+    ctx.attachTabsContainer = attach;
+    ctx.detachTabsContainer = detach;
+    for (const id of ctx.boardGroups.keys())
+        if (isTabs(id))
+            attach(id);
+}
+/**
+ * Steps that depend on each other's RESULT — create a group, then move a page
+ * into it, then place the group on the board — run as one history step. A
+ * batch checks every member's `canExecute` before running any of them, and
+ * the second step's precondition (the group exists) is what the first step
+ * creates, so as a batch the chain is refused. This runs the chain in order
+ * and reverses it on undo, judging nothing up front.
+ */
+class SequenceCommand extends Command {
+    constructor(name, steps) {
+        super(name);
+        this.steps = steps;
+    }
+    execute(context) {
+        for (const c of this.steps)
+            c.execute(context);
+    }
+    undo(context) {
+        for (let i = this.steps.length - 1; i >= 0; i--)
+            this.steps[i].undo(context);
+    }
+    canExecute() {
+        return true;
+    }
+    canUndo() {
+        return true;
+    }
+    serialize() {
+        return { id: this.id, name: this.name, timestamp: this.timestamp, data: { steps: this.steps.map((c) => c.serialize()) } };
     }
 }
 /** `setCaption` as one history step: execute re-applies the value, undo the previous one. */
@@ -605,6 +659,160 @@ export function createDashboardHandle(ctx) {
         entries.sort((p1, p2) => { var _a, _b, _c, _d; return ((_a = p1.y) !== null && _a !== void 0 ? _a : 0) - ((_b = p2.y) !== null && _b !== void 0 ? _b : 0) || ((_c = p1.x) !== null && _c !== void 0 ? _c : 0) - ((_d = p2.x) !== null && _d !== void 0 ? _d : 0); });
         return entries;
     };
+    /**
+     * TEARING A TAB OUT — what the page becomes. VS Code: a tab dragged out of
+     * its group makes a group of its own, still wearing its tab. So the board
+     * receives a NEW one-page tab container, `<page>__group`, built exactly as
+     * mountBoard() builds an authored one (slab cell in `gridItem`, spec fields
+     * in `containerWidget`, board metadata so fromDocument() rebinds it), the
+     * page moves into it, and the handle's own registry follows — on execute and
+     * on undo. A container left with no page closes, as VS Code closes a group
+     * whose last editor leaves; undo reopens it. The board that lands it adds
+     * its own displaced-tile commands around these.
+     */
+    ctx.tearOutPlan = (containerId, pageId) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
+        const from = ctx.boardGroups.get(containerId);
+        const pg = (_b = ctx.boardGroups.get(pageId)) !== null && _b !== void 0 ? _b : model === null || model === void 0 ? void 0 : model.getGroup(pageId);
+        const fromSpec = specById.get(containerId);
+        const pageSpec = specById.get(pageId);
+        if (!model || !from || !pg || !pageSpec)
+            return null;
+        const viewId = (_c = ctx.viewOfBoard.get(containerId)) !== null && _c !== void 0 ? _c : ctx.active;
+        const W = `${pageId}__group`;
+        const tabsOpts = (_d = ctx.tabsOf.get(containerId)) !== null && _d !== void 0 ? _d : {};
+        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));
+        return {
+            arrivingId: W,
+            label,
+            size,
+            commands: (cell, rect, boardId) => {
+                var _a, _b, _c, _d, _e;
+                const fromMeta = ((_a = from.getMetadata('containerWidget')) !== null && _a !== void 0 ? _a : {});
+                const fromBoard = ((_b = from.getMetadata('dashboardBoard')) !== null && _b !== void 0 ? _b : {});
+                const g = new GroupModel({ id: W, name: label });
+                g.setMetadata('frameChrome', 'none');
+                g.setMetadata('gridItem', gridItemFromCell(cell));
+                g.setMetadata('containerWidget', Object.assign({ title: label, columns: (_c = fromMeta.columns) !== null && _c !== void 0 ? _c : cell.w, maxRows: (_d = fromMeta.maxRows) !== null && _d !== void 0 ? _d : cell.h, layout: 'tabs', active: pageId }, (Object.keys(tabsOpts).length ? { tabs: tabsOpts } : {})));
+                g.setMetadata('dashboardBoard', Object.assign(Object.assign({}, fromBoard), { layout: 'tabs' }));
+                g.position = { x: rect.x, y: rect.y };
+                g.size = { width: rect.width, height: rect.height, depth: 0 };
+                const wSpec = Object.assign(Object.assign({ id: W, title: label, layout: 'tabs', active: pageId }, (Object.keys(tabsOpts).length ? { tabs: tabsOpts } : {})), { columns: (_e = fromMeta.columns) !== null && _e !== void 0 ? _e : cell.w, widgets: [pageSpec] });
+                let slot = -1;
+                const born = {
+                    register: () => {
+                        var _a;
+                        const live = model.getGroup(W);
+                        if (!live)
+                            return;
+                        ctx.boardGroups.set(W, live);
+                        ctx.layoutOf.set(W, 'tabs');
+                        ctx.activeTab.set(W, pageId);
+                        ctx.tabsOf.set(W, tabsOpts);
+                        specById.set(W, wSpec);
+                        ctx.viewOfBoard.set(W, viewId);
+                        viewOfWidget.set(W, boardId);
+                        viewOfWidget.set(pageId, W);
+                        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);
+                            }
+                        }
+                        const arr = ctx.boardWidgets.get(boardId);
+                        if (arr && !arr.some((w) => w.id === W))
+                            arr.push(wSpec);
+                        ctx.boardWidgets.set(W, wSpec.widgets);
+                        (_a = ctx.attachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, W);
+                    },
+                    unregister: () => {
+                        var _a;
+                        (_a = ctx.detachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, W);
+                        ctx.boardGroups.delete(W);
+                        ctx.layoutOf.delete(W);
+                        ctx.activeTab.delete(W);
+                        ctx.tabsOf.delete(W);
+                        specById.delete(W);
+                        ctx.viewOfBoard.delete(W);
+                        viewOfWidget.delete(W);
+                        viewOfWidget.set(pageId, containerId);
+                        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);
+                        }
+                        const arr = ctx.boardWidgets.get(boardId);
+                        if (arr) {
+                            const i = arr.findIndex((w) => w.id === W);
+                            if (i >= 0)
+                                arr.splice(i, 1);
+                        }
+                        ctx.boardWidgets.delete(W);
+                    },
+                };
+                const move = [
+                    new SequenceCommand('Move tab out', [
+                        new AddGroupCommand(g),
+                        new RemoveFromGroupCommand(containerId, pageId),
+                        new AddToGroupCommand(W, pageId),
+                        new AddToGroupCommand(boardId, W),
+                        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 = {
+                    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 {
+                    move,
+                    collapse: [
+                        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). */
     const registryOf = (id, boardId, spec) => {

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

@@ -493,13 +493,64 @@ interface BinderPeer {
     }, pxSize: {
         width: number;
         height: number;
-    }): AdoptedLeg | null;
+    }, opts?: AdoptOptions): AdoptedLeg | null;
     /**
      * Tear a tab page out of its container and onto THIS board, driven by the
      * press that started on its tab. Answers false when the board will not take
      * it, so the strip can leave the press alone.
      */
-    tearOutMember(pageId: string, fromGroupId: string, label: string, ev: PointerEvent): boolean;
+    tearOutMember(pageId: string, fromGroupId: string, ev: PointerEvent, plan: TearOutPlan): boolean;
+}
+/**
+ * What a torn-out page becomes, decided by the dashboard handle (which owns
+ * the specs and the registry) and carried out by the board it lands on. VS
+ * Code's rule: a tab dragged out of its group makes a GROUP of its own — so
+ * the board receives a new one-page tab container, not the bare page, and the
+ * page keeps its tab.
+ */
+export interface TearOutPlan {
+    /** The id the board will hold: the new one-page tab container around the page. */
+    arrivingId: string;
+    /** What the chip that follows the pointer says. */
+    label: string;
+    /** Pixel size to arrive at — the page plus the strip the new group needs. */
+    size: {
+        width: number;
+        height: number;
+    };
+    /**
+     * The model and registry commands for a landing at `cell`/`rect` on
+     * `boardId`. `move` creates the group, moves the page in and registers it;
+     * `collapse` (possibly empty) removes the container the page left when it
+     * was its last page — VS Code closes an empty group.
+     */
+    commands(cell: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }, rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: 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;
+interface AdoptOptions {
+    /**
+     * 'shrink': take the cell under the pointer at the height that FITS there
+     * (down to TEAR_OUT_MIN_ROWS) before looking for another row — a torn-out
+     * page takes the room where it lands, the way a torn-out editor does. The
+     * default keeps the tile's size and finds the nearest cell that takes it.
+     */
+    fit?: 'shrink';
+    /** Anchor the tile's TOP edge at the pointer instead of centring it (the pointer holds a tab, the page hangs below it). */
+    anchor?: 'top';
 }
 interface AdoptedLeg {
     groupId: string;

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

@@ -154,6 +154,8 @@ export function pressOnDragHandle(sel, target, hostEl, clientX, clientY) {
 }
 /** The caption strip of a host with no kit header, px from the card's top. */
 export const CAPTION_BAND = 28;
+/** A torn-out page never arrives shorter than this: a strip with no room under it is not a group. */
+export const TEAR_OUT_MIN_ROWS = 2;
 /**
  * Binders on the same canvas find each other here. A WeakMap: a canvas that
  * is gone takes its (empty) peer set with it — the strong Map it replaced kept
@@ -2130,6 +2132,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         }
         return best;
     };
+    /** `handle.planRemoval` for local use before the handle object exists. */
+    const planRemovalOf = (id) => handle.planRemoval(id);
     /** This binder's side of an adoption: enter gateless, then live-push. */
     /**
      * Put an ARRIVING tile as close to the pointer as the board allows. The
@@ -2139,37 +2143,40 @@ export function bindDashboardGrid(api, group, options = {}) {
      * I put it". Slide along the row instead, nearest first, so a tile that
      * cannot take the cell under the pointer still lands beside it.
      */
-    const placeNear = (id, x, y, w) => {
-        // `changed:false` means BOTH "refused" and "it is already there", and
-        // reading the second as the first made the search walk straight past the
-        // right answer: parked on the nearest legal cell, the next pointer move
-        // re-tried the wanted cell (refused), re-tried the cell it was ON (no
-        // change, read as refused) and then took a FARTHER one — so the tile
-        // oscillated for the whole drag and settled wherever the last swing left
-        // it. Ask where the tile IS, not whether the call moved it.
-        const at = (cx, cy) => {
+    /**
+     * Slide along ONE row, nearest column first. `changed:false` means BOTH
+     * "refused" and "it is already there", and reading the second as the first
+     * made the search walk straight past the right answer: parked on the nearest
+     * legal cell, the next pointer move re-tried the wanted cell (refused),
+     * re-tried the cell it was ON (no change, read as refused) and then took a
+     * FARTHER one — so the tile oscillated for the whole drag and settled
+     * wherever the last swing left it. Ask where the tile IS, not whether the
+     * call moved it.
+     */
+    const placeOnRow = (id, x, y, w) => {
+        const at = (cx) => {
             const i = engine.getItem(id);
-            return !!i && i.x === cx && i.y === cy;
+            return !!i && i.x === cx && i.y === y;
         };
         const maxX = Math.max(0, columns - w);
-        const scanRow = (cy) => {
-            if (at(x, cy))
-                return true;
-            if (engine.moveCheck(id, x, cy, { gate: false }).changed)
-                return true;
-            for (let d = 1; d <= columns; d++) {
-                for (const cx of [x - d, x + d]) {
-                    if (cx < 0 || cx > maxX)
-                        continue;
-                    if (at(cx, cy))
-                        return true;
-                    if (engine.moveCheck(id, cx, cy, { gate: false }).changed)
-                        return true;
-                }
+        if (at(x))
+            return true;
+        if (engine.moveCheck(id, x, y, { gate: false }).changed)
+            return true;
+        for (let d = 1; d <= columns; d++) {
+            for (const cx of [x - d, x + d]) {
+                if (cx < 0 || cx > maxX)
+                    continue;
+                if (at(cx))
+                    return true;
+                if (engine.moveCheck(id, cx, y, { gate: false }).changed)
+                    return true;
             }
-            return false;
-        };
-        if (scanRow(y))
+        }
+        return false;
+    };
+    const placeNear = (id, x, y, w) => {
+        if (placeOnRow(id, x, y, w))
             return true;
         // EVERY column on that row refused — which is what a locked section
         // spanning the full width does, and there are plenty of those. Sliding
@@ -2181,15 +2188,70 @@ export function bindDashboardGrid(api, group, options = {}) {
             for (const cy of [y - d, y + d]) {
                 if (cy < 0)
                     continue;
-                if (scanRow(cy))
+                if (placeOnRow(id, x, cy, w))
                     return true;
             }
         }
         return false;
     };
+    /**
+     * Rows free at (x, y) across `w` columns before the nearest LOCKED tile
+     * below — a section is a locked tile nothing can push, so that is the hard
+     * ceiling on what can land there — capped at the natural height. 0 when the
+     * row itself lies under a locked tile.
+     */
+    const fitHeightAt = (id, x, y, w, hNatural) => {
+        let limit = hNatural;
+        for (const it of engine.getItems()) {
+            if (it.id === id || !it.locked)
+                continue;
+            if (!(it.x < x + w && x < it.x + it.w))
+                continue;
+            if (it.y <= y && it.y + it.h > y)
+                return 0;
+            if (it.y > y)
+                limit = Math.min(limit, it.y - y);
+        }
+        const b = bound();
+        if (b !== undefined)
+            limit = Math.min(limit, Math.max(0, b - y));
+        return limit;
+    };
+    /**
+     * A TEAR-OUT takes the cell under the pointer at the height that fits there
+     * — a page dragged out of a full-height panel onto a busy board would
+     * otherwise have exactly one legal cell, below the lowest section, and the
+     * drop would land a screen away from the pointer with its placeholder out of
+     * sight. Only when nothing fits there does it fall back to the nearest row
+     * at its natural height.
+     */
+    const placeFitting = (id, x, y, w, hNatural) => {
+        var _a, _b;
+        const it = engine.getItem(id);
+        if (!it)
+            return false;
+        const hFit = fitHeightAt(id, x, y, w, hNatural);
+        if (hFit >= TEAR_OUT_MIN_ROWS) {
+            if (it.h !== hFit)
+                engine.resizeCheck(id, w, hFit);
+            if (((_a = engine.getItem(id)) === null || _a === void 0 ? void 0 : _a.h) === hFit && placeOnRow(id, x, y, w))
+                return true;
+        }
+        const now = engine.getItem(id);
+        if (now && now.h !== hNatural) {
+            // Growing back where it sits may be refused; the entry row at the bottom
+            // always has room, so grow there and let placeNear bring it up.
+            engine.resizeCheck(id, w, hNatural);
+            if (((_b = engine.getItem(id)) === null || _b === void 0 ? void 0 : _b.h) !== hNatural) {
+                engine.moveCheck(id, 0, engine.rows(), { gate: false });
+                engine.resizeCheck(id, w, hNatural);
+            }
+        }
+        return placeNear(id, x, y, w);
+    };
     const adopt = (
     // Only the id is used: a tab page arriving here is a GROUP, not a node.
-    node, world, pxSize) => {
+    node, world, pxSize, opts = {}) => {
         if (disposed)
             return null;
         const f = frame();
@@ -2224,9 +2286,16 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
         }
         adoptedGhostId = node.id;
-        const tl = centredTopLeft(world.x, world.y, span);
-        const cell0 = pointToCell(tl.x, tl.y, f, gg, rows(), span.w);
-        placeNear(node.id, cell0.x, cell0.y, span.w);
+        const hNatural = span.h;
+        const wantedCell = (wx, wy, itemW, itemH) => {
+            const tl = centredTopLeft(wx, wy, { w: itemW, h: opts.anchor === 'top' ? 0 : itemH });
+            return pointToCell(tl.x, tl.y, frame(), geom(), rows(), itemW);
+        };
+        const place = (cell, itemW) => opts.fit === 'shrink' ? placeFitting(node.id, cell.x, cell.y, itemW, hNatural) : placeNear(node.id, cell.x, cell.y, itemW);
+        let lastWant = null;
+        const cell0 = wantedCell(world.x, world.y, span.w, span.h);
+        lastWant = cell0;
+        place(cell0, span.w);
         armGlide();
         project();
         syncPlaceholder();
@@ -2236,9 +2305,12 @@ export function bindDashboardGrid(api, group, options = {}) {
                 const item = engine.getItem(node.id);
                 if (!item)
                     return;
-                const tlm = centredTopLeft(w.x, w.y, { w: item.w, h: item.h });
-                const cell = pointToCell(tlm.x, tlm.y, frame(), geom(), rows(), item.w);
-                if (placeNear(node.id, cell.x, cell.y, item.w))
+                const cell = wantedCell(w.x, w.y, item.w, opts.fit === 'shrink' ? hNatural : item.h);
+                // The search is worth running once per wanted cell, not per pixel.
+                if (lastWant && lastWant.x === cell.x && lastWant.y === cell.y)
+                    return;
+                lastWant = cell;
+                if (place(cell, item.w))
                     project();
                 syncPlaceholder();
             },
@@ -2271,7 +2343,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const selfPeer = {
         group,
-        tearOutMember: (pageId, fromGroupId, label, ev) => beginTearOut(pageId, fromGroupId, label, ev),
+        tearOutMember: (pageId, fromGroupId, ev, plan) => beginTearOut(pageId, fromGroupId, ev, plan),
         clearSelection: () => {
             var _a;
             if (selectedId === undefined)
@@ -2822,36 +2894,31 @@ export function bindDashboardGrid(api, group, options = {}) {
      * Like VS Code, the page itself does not follow the pointer; a chip carrying
      * the tab's label does, and the placeholder shows where the drop will land.
      */
-    const beginTearOut = (pageId, fromGroupId, label, ev) => {
-        var _a, _b, _c;
+    const beginTearOut = (pageId, fromGroupId, ev, plan) => {
+        var _a;
         if (disposed || gesture || slabGesture || isStatic || tearing)
             return false;
-        const pg = diagram.getGroup(pageId);
         const from = diagram.getGroup(fromGroupId);
-        if (!pg || !from || !engine.getItem(fromGroupId))
+        if (!from || !diagram.getGroup(pageId) || !engine.getItem(fromGroupId))
             return false;
-        const size = sizeOf(pg);
-        const frameBefore = frameOfGroup(pg);
-        const cellBefore = (_b = cellFromGridItem((_a = pg.getMetadata) === null || _a === void 0 ? void 0 : _a.call(pg, 'gridItem'))) !== null && _b !== void 0 ? _b : {
-            x: 0,
-            y: 0,
-            w: 1,
-            h: 1,
-        };
         const toWorld = (cx, cy) => {
             var _a;
             const rect = api.container.getBoundingClientRect();
             return ((_a = api.viewport) === null || _a === void 0 ? void 0 : _a.clientToWorld) ? api.viewport.clientToWorld(cx, cy, rect) : { x: cx - rect.left, y: cy - rect.top };
         };
         const first = toWorld(ev.clientX, ev.clientY);
-        const leg = adopt({ id: pageId }, first, { width: size.width, height: size.height });
+        // The board holds the NEW group, not the bare page: it is adopted under the
+        // group's id, sized for the page plus its strip, taking the room under the
+        // pointer with its top edge at the pointer — the tab is what the pointer
+        // holds, the page hangs below it.
+        const leg = adopt({ id: plan.arrivingId }, first, plan.size, { fit: 'shrink', anchor: 'top' });
         if (!leg)
             return false;
         tearing = pageId;
-        const doc = (_c = api.container.ownerDocument) !== null && _c !== void 0 ? _c : document;
+        const doc = (_a = api.container.ownerDocument) !== null && _a !== void 0 ? _a : document;
         const chip = doc.createElement('div');
         chip.className = 'axdb-drag-chip axdb-tab-chip';
-        chip.textContent = label;
+        chip.textContent = plan.label;
         doc.body.appendChild(chip);
         const moveChip = (cx, cy) => {
             chip.style.left = `${cx + 6}px`;
@@ -2903,12 +2970,12 @@ export function bindDashboardGrid(api, group, options = {}) {
                 api.renderNow();
                 return;
             }
-            const changed = execute('Move tab out', [
-                ...fin.commands,
-                new SetGroupCellCommand(pageId, cellBefore, fin.cell, frameBefore, fin.rect),
-                new RemoveFromGroupCommand(fromGroupId, pageId),
-                new AddToGroupCommand(group.id, pageId),
-            ]);
+            const planned = plan.commands(fin.cell, fin.rect, group.id);
+            // The container the page left may have been holding its last page: it
+            // goes too, and the tiles around its slab settle the way a removal
+            // settles them (VS Code closes a group whose last editor leaves).
+            const collapse = planned.collapse.length > 0 ? [...planRemovalOf(fromGroupId), ...planned.collapse] : [];
+            const changed = execute('Move tab out', [...fin.commands, ...planned.move, ...collapse]);
             disarmGlideSoon();
             enforceBoardHeight();
             persistLayouts();
@@ -3296,7 +3363,18 @@ export function bindDashboardGrid(api, group, options = {}) {
             const it = engine.getItem(id);
             if (!it)
                 return [];
-            const clone = new GridPackEngine(engine.getItems().map((i) => (Object.assign({}, i))), { columns, float });
+            // A float:false engine PACKS as it is built, in ARRAY order — so a tile
+            // that entered the engine last (one just adopted by a drop) is packed
+            // last, and everything above it in the array floats up through the room
+            // it occupies. The plan then "moved" tiles the removal never touched and
+            // undid the drop's own push (L64: B back onto the cell the torn-out
+            // group had just taken, and the group auto-placed into the hole the
+            // closed container left). Packing in row-then-column order is gravity,
+            // whatever order the tiles arrived in.
+            const clone = new GridPackEngine(engine
+                .getItems()
+                .map((i) => (Object.assign({}, i)))
+                .sort((a, b) => a.y - b.y || a.x - b.x), { columns, float });
             clone.remove(id);
             const f = frame();
             const g = geom();

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

@@ -1253,7 +1253,7 @@ export function bindDashboardSplit(api, group, options = {}) {
         resizeMemberBy: () => ({ changed: false }),
         // A split board has no cells to drop a torn-out page into: it refuses,
         // and the press stays a plain tab click.
-        tearOutMember: () => false,
+        tearOutMember: (_pageId, _fromGroupId, _ev, _plan) => false,
         containsWorld: (x, y) => worldInsideBoard(x, y),
         containsWorldExtended: (x, y) => worldInsideBoard(x, y),
         frameArea: () => {