@grafloria/element 0.4.3 → 0.4.5

package/package.json

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

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

@@ -188,6 +188,14 @@ export interface DashboardOptions {
      * so a designer/viewer pair is one flag apart. Live: `handle.setStatic()`.
      */
     static?: boolean;
+    /**
+     * DRAG HANDLE — DevExpress drags an item by its caption. `true`: a widget
+     * moves only from its header, which shows a grip; a selector string: your
+     * own handle inside the card; off (default): the whole card. Resize edges
+     * and the keyboard are unaffected; the body stays interactive. Live:
+     * `handle.setDragHandle()`.
+     */
+    dragHandle?: boolean | string;
     /**
      * RIGHT-TO-LEFT boards: column x=0 renders at the RIGHT edge and columns run
      * leftwards. Cells are untouched — the same `widgets` array describes the
@@ -287,6 +295,9 @@ export interface DashboardHandle {
     /** Static (read-only for the pointer) mode, live — the viewer/designer switch. */
     setStatic(on: boolean): void;
     getStatic(): boolean;
+    /** Drag-handle mode, live, every view: `true` = the header, a selector = your own handle, `false` = the whole card. */
+    setDragHandle(v: boolean | string): void;
+    getDragHandle(): boolean | string;
     /**
      * Add a widget to a view. CREATES the node (you do not pre-build one), wires
      * its metadata, and commits node + membership as ONE undoable step.

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

@@ -561,6 +561,13 @@ export function createDashboardHandle(ctx) {
             (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
         },
         getStatic: () => { var _a, _b, _c; return (_b = (_a = binders.get(ctx.active)) === null || _a === void 0 ? void 0 : _a.getStatic()) !== null && _b !== void 0 ? _b : ((_c = ctx.optionsBase.static) !== null && _c !== void 0 ? _c : false); },
+        setDragHandle(v) {
+            var _a;
+            for (const b of binders.values())
+                b.setDragHandle(v);
+            (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
+        },
+        getDragHandle: () => { var _a, _b, _c; return (_b = (_a = binders.get(ctx.active)) === null || _a === void 0 ? void 0 : _a.getDragHandle()) !== null && _b !== void 0 ? _b : ((_c = ctx.optionsBase.dragHandle) !== null && _c !== void 0 ? _c : false); },
         addWidget(spec, viewId) {
             var _a, _b, _c, _d, _e, _f;
             const vid = viewId !== null && viewId !== void 0 ? viewId : ctx.active;
@@ -657,7 +664,7 @@ export function createDashboardHandle(ctx) {
             // `sizing` and `float` are the two a user changes from the toolbar, and
             // reading them from the authored literal would restore the board they
             // started with rather than the one they are looking at.
-            return Object.assign(Object.assign({}, ctx.optionsBase), { renderWidget: undefined, onLayoutChange: undefined, columns: ctx.columns, gap: ctx.gap, rowHeight: ctx.rowHeight, mode: ctx.mode, overflow: ctx.overflow, sizing: handle.getSizing(), float: handle.getFloat(), rtl: handle.getRtl(), static: handle.getStatic(), layout: handle.getLayout(), views: savedViews });
+            return Object.assign(Object.assign({}, ctx.optionsBase), { renderWidget: undefined, onLayoutChange: undefined, columns: ctx.columns, gap: ctx.gap, rowHeight: ctx.rowHeight, mode: ctx.mode, overflow: ctx.overflow, sizing: handle.getSizing(), float: handle.getFloat(), rtl: handle.getRtl(), static: handle.getStatic(), dragHandle: handle.getDragHandle(), layout: handle.getLayout(), views: savedViews });
         },
         dispose() {
             var _a, _b, _c, _d, _e;
@@ -964,7 +971,7 @@ export function dashboard(options) {
         }, get handle() {
             return handle;
         }, finalize: (api) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             const a = api;
             if (!a)
                 return;
@@ -1002,16 +1009,17 @@ export function dashboard(options) {
                     fluid: mode === 'fluid',
                     overflow,
                     static: (_g = options.static) !== null && _g !== void 0 ? _g : false,
-                    layout: (_h = ctx.layoutOf.get(v.id)) !== null && _h !== void 0 ? _h : layout,
+                    dragHandle: (_h = options.dragHandle) !== null && _h !== void 0 ? _h : false,
+                    layout: (_j = ctx.layoutOf.get(v.id)) !== null && _j !== void 0 ? _j : layout,
                 });
-                if (((_j = ctx.layoutOf.get(v.id)) !== null && _j !== void 0 ? _j : layout) === 'split' && v.tree !== undefined)
+                if (((_k = ctx.layoutOf.get(v.id)) !== null && _k !== void 0 ? _k : layout) === 'split' && v.tree !== undefined)
                     g.setMetadata(SPLIT_TREE_KEY, v.tree);
                 g.size = { width: viewW(v), height: viewH(v), depth: 0 };
                 g.position = { x: v.id === ctx.active ? 0 : OFFSCREEN_X, y: 0 };
                 groups.set(v.id, g);
                 ctx.boardGroups.set(v.id, g);
                 mountBoard(v.id, v.id, v.widgets, g);
-                binders.set(v.id, bindView(v, g, (_k = ctx.layoutOf.get(v.id)) !== null && _k !== void 0 ? _k : layout));
+                binders.set(v.id, bindView(v, g, (_l = ctx.layoutOf.get(v.id)) !== null && _l !== void 0 ? _l : layout));
             }
             // LIVE LAYOUT SWITCH (setLayout): keep the picture, swap the binder.
             // Either way the outgoing binder's cells are written where the grid
@@ -1026,6 +1034,7 @@ export function dashboard(options) {
                 if (!v || !g || !b)
                     return;
                 const cells = b.saveLayout().cells;
+                const live = { rtl: b.getRtl(), static: b.getStatic(), dragHandle: b.getDragHandle() };
                 b.dispose();
                 const write = (fn) => (model.runSystemWrite ? model.runSystemWrite(fn) : fn());
                 write(() => {
@@ -1043,7 +1052,7 @@ export function dashboard(options) {
                     g.setMetadata('dashboardBoard', Object.assign(Object.assign({}, board), { layout: next }));
                 });
                 ctx.layoutOf.set(viewId, next);
-                binders.set(viewId, bindView(v, g, next));
+                binders.set(viewId, bindView(v, g, next, live));
                 (_a = binders.get(viewId)) === null || _a === void 0 ? void 0 : _a.sync();
             };
             handle.showView(ctx.active);
@@ -1056,7 +1065,7 @@ export function dashboard(options) {
                 ctx.boardGroups.set(id, g);
                 bindContainer(g, w, (_a = ctx.viewOfBoard.get(id)) !== null && _a !== void 0 ? _a : ctx.active);
             };
-            (_l = ctx.attachHistory) === null || _l === void 0 ? void 0 : _l.call(ctx);
+            (_m = ctx.attachHistory) === null || _m === void 0 ? void 0 : _m.call(ctx);
             return;
             /**
              * Mount one board's widgets into its group — and recurse for CONTAINERS.
@@ -1131,22 +1140,28 @@ export function dashboard(options) {
                 }
             }
             /** Bind a VIEW's board on its group, under the given layout. */
-            function bindView(v, g, viewLayout) {
-                var _a, _b, _c, _d, _e, _f;
-                const common = Object.assign(Object.assign({ gap, padding: gap, rtl: (_a = options.rtl) !== null && _a !== void 0 ? _a : false, fluid: mode === 'fluid', static: (_b = options.static) !== null && _b !== void 0 ? _b : false }, ((_c = options.binder) !== null && _c !== void 0 ? _c : {})), { onGesture: (e) => {
+            /**
+             * Bind a view's board. `live` carries the switches a previous binder of
+             * the same view held (a re-bind on a layout change): without it a board
+             * switched to static, RTL or drag-by-header LIVE snapped back to its
+             * authored options the moment its layout changed (s34 caught it).
+             */
+            function bindView(v, g, viewLayout, live) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                const common = Object.assign(Object.assign({ gap, padding: gap, rtl: (_b = (_a = live === null || live === void 0 ? void 0 : live.rtl) !== null && _a !== void 0 ? _a : options.rtl) !== null && _b !== void 0 ? _b : false, fluid: mode === 'fluid', static: (_d = (_c = live === null || live === void 0 ? void 0 : live.static) !== null && _c !== void 0 ? _c : options.static) !== null && _d !== void 0 ? _d : false, dragHandle: (_f = (_e = live === null || live === void 0 ? void 0 : live.dragHandle) !== null && _e !== void 0 ? _e : options.dragHandle) !== null && _f !== void 0 ? _f : false }, ((_g = options.binder) !== null && _g !== void 0 ? _g : {})), { onGesture: (e) => {
                         var _a, _b;
                         if (e.type === 'commit')
                             reportChanged();
                         (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                     } });
                 if (viewLayout === 'split') {
-                    return bindDashboardSplit(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_d = v.columns) !== null && _d !== void 0 ? _d : columns, baseRowHeight: rowHeight, designHeight: viewH(v) }), (v.tree !== undefined ? { tree: v.tree } : {})));
+                    return bindDashboardSplit(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_h = v.columns) !== null && _h !== void 0 ? _h : columns, baseRowHeight: rowHeight, designHeight: viewH(v) }), (v.tree !== undefined ? { tree: v.tree } : {})));
                 }
-                return bindDashboardGrid(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_e = v.columns) !== null && _e !== void 0 ? _e : columns, sizing, baseRowHeight: rowHeight, designHeight: viewH(v), float: (_f = options.float) !== null && _f !== void 0 ? _f : false, overflow }), (options.responsive ? { responsive: options.responsive } : {})));
+                return bindDashboardGrid(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_j = v.columns) !== null && _j !== void 0 ? _j : columns, sizing, baseRowHeight: rowHeight, designHeight: viewH(v), float: (_k = options.float) !== null && _k !== void 0 ? _k : false, overflow }), (options.responsive ? { responsive: options.responsive } : {})));
             }
             /** Bind (or re-bind) a container's inner grid on its group. */
             function bindContainer(cg, w, viewId) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 binders.set(w.id, bindDashboardGrid(a, cg, {
                     columns: innerColumnsOf(w),
                     gap,
@@ -1158,6 +1173,7 @@ export function dashboard(options) {
                     float: false,
                     rtl: (_c = options.rtl) !== null && _c !== void 0 ? _c : false,
                     static: (_d = options.static) !== null && _d !== void 0 ? _d : false,
+                    dragHandle: (_e = options.dragHandle) !== null && _e !== void 0 ? _e : false,
                     onGesture: (e) => {
                         var _a, _b;
                         if (e.type === 'commit')

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

@@ -212,7 +212,28 @@ export interface DashboardGridOptions {
      * still works. The viewer's mode — see `setStatic` for the live switch.
      */
     static?: boolean;
+    /**
+     * DRAG HANDLE (DevExpress drags an item by its caption; gridstack's
+     * `handle`): `true` — a widget moves only from its header, which shows a
+     * grip; a selector string — your own handle inside the host. Off (default):
+     * the whole card is the handle. Resize edges are unaffected and the body
+     * stays interactive (scroll a table, click a legend). Live: `setDragHandle`.
+     */
+    dragHandle?: boolean | string;
 }
+/** The selector a `dragHandle` value names — `null` when the whole card is the handle. */
+export declare const dragHandleSelector: (v: boolean | string | undefined) => string | null;
+/** The public form of a stored handle selector (the inverse of `dragHandleSelector`). */
+export declare const dragHandleValue: (sel: string | null) => boolean | string;
+/** The container class that turns the header grip on. */
+export declare const DRAG_HANDLE_CLASS = "axdb-drag-handle";
+/**
+ * Did a press land on the drag handle? A press INSIDE the handle element
+ * always does. The default handle is a CAPTION BAR the DevExpress way: the
+ * strip from the card's top edge down to the header's bottom, padding
+ * included — so the pointer need not hit the header's text to grab the tile.
+ */
+export declare function pressOnDragHandle(sel: string, target: Element | null, hostEl: HTMLElement | null, clientX: number, clientY: number): boolean;
 export interface DashboardGridHandle {
     /** Rebuild the engine from the group's members + their cells, re-project pixels. */
     sync(): void;
@@ -245,6 +266,9 @@ export interface DashboardGridHandle {
     /** Static mode, live: pointer gestures off (and handles gone) or back on. */
     setStatic(on: boolean): void;
     getStatic(): boolean;
+    /** Drag-handle mode, live: `true` = the header, a selector = your own handle, `false` = the whole card. */
+    setDragHandle(v: boolean | string): void;
+    getDragHandle(): boolean | string;
     /**
      * Move keyboard focus to a member (the roving tabindex lands on it). The
      * host takes DOM focus when it exists; returns false for a non-member.
@@ -271,6 +295,8 @@ export interface DashboardGridHandle {
         responsive: boolean;
         fluid: boolean;
         static: boolean;
+        /** `true` = the header is the grip, a selector = a custom one, `false` = the whole card. */
+        dragHandle: boolean | string;
         /** Fit-mode row capacity (undefined when unbounded). */
         capacity: number | undefined;
         gap: number;

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

@@ -54,6 +54,32 @@ import { AddToGroupCommand, BatchCommand, Command, GridPackEngine, RemoveFromGro
 import { LiveRegionController, registerTool } from '@grafloria/renderer';
 import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridItemFromCell, pointToCell, rowHeightFor, sizeToSpan, } from './grid-mapping.js';
 import { ensureDashboardKitStyles } from './styles.js';
+/** The selector a `dragHandle` value names — `null` when the whole card is the handle. */
+export const dragHandleSelector = (v) => v === true ? '.axdb-widget-h' : typeof v === 'string' && v.length > 0 ? v : null;
+/** The public form of a stored handle selector (the inverse of `dragHandleSelector`). */
+export const dragHandleValue = (sel) => sel === null ? false : sel === '.axdb-widget-h' ? true : sel;
+/** The container class that turns the header grip on. */
+export const DRAG_HANDLE_CLASS = 'axdb-drag-handle';
+/**
+ * Did a press land on the drag handle? A press INSIDE the handle element
+ * always does. The default handle is a CAPTION BAR the DevExpress way: the
+ * strip from the card's top edge down to the header's bottom, padding
+ * included — so the pointer need not hit the header's text to grab the tile.
+ */
+export function pressOnDragHandle(sel, target, hostEl, clientX, clientY) {
+    var _a, _b;
+    const grip = (_b = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, sel)) !== null && _b !== void 0 ? _b : null;
+    if (grip && (!hostEl || hostEl.contains(grip)))
+        return true;
+    if (sel !== '.axdb-widget-h' || !hostEl)
+        return false;
+    const header = hostEl.querySelector('.axdb-widget-h');
+    if (!header)
+        return false;
+    const hr = hostEl.getBoundingClientRect();
+    const r = header.getBoundingClientRect();
+    return clientX >= hr.left && clientX <= hr.right && clientY >= hr.top && clientY <= r.bottom;
+}
 /**
  * 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
@@ -182,6 +208,8 @@ export function bindDashboardGrid(api, group, options = {}) {
     const fluid = options.fluid === true;
     const overflow = (_h = options.overflow) !== null && _h !== void 0 ? _h : 'bounded';
     let isStatic = options.static === true;
+    let dragHandle = dragHandleSelector(options.dragHandle);
+    api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle !== null);
     /** The member the ROVING TABINDEX rests on (one tab stop per board). */
     let focusedId;
     const live = liveRegionFor(api.container);
@@ -1621,24 +1649,29 @@ export function bindDashboardGrid(api, group, options = {}) {
             const hostEl = hostOf(node.id);
             const resizable = ((_g = node.getMetadata) === null || _g === void 0 ? void 0 : _g.call(node, 'widgetResizable')) !== false;
             const movable = ((_h = node.getMetadata) === null || _h === void 0 ? void 0 : _h.call(node, 'widgetMovable')) !== false;
+            // `ev.screen` is ELEMENT-LOCAL px; host rects are in client px. Compare
+            // like with like — the source event's clientX/Y when there is one, else
+            // the container's origin plus the local offset.
+            const src = ev.source;
+            const cr = api.container.getBoundingClientRect();
+            const cx = typeof (src === null || src === void 0 ? void 0 : src.clientX) === 'number' ? src.clientX : cr.left + ev.screen.x;
+            const cy = typeof (src === null || src === void 0 ? void 0 : src.clientY) === 'number' ? src.clientY : cr.top + ev.screen.y;
             let edges = NO_EDGES;
             if (resizable) {
                 if (onHandle)
                     edges = rtl ? { n: false, e: false, s: true, w: true } : { n: false, e: true, s: true, w: false };
-                else if (hostEl) {
-                    // `ev.screen` is ELEMENT-LOCAL px; the host rect is in client px.
-                    // Compare like with like — the source event's clientX/Y when there
-                    // is one, else the container's origin plus the local offset.
-                    const src = ev.source;
-                    const cr = api.container.getBoundingClientRect();
-                    const cx = typeof (src === null || src === void 0 ? void 0 : src.clientX) === 'number' ? src.clientX : cr.left + ev.screen.x;
-                    const cy = typeof (src === null || src === void 0 ? void 0 : src.clientY) === 'number' ? src.clientY : cr.top + ev.screen.y;
+                else if (hostEl)
                     edges = edgesNear(hostEl, cx, cy);
-                }
             }
             const isResize = anyEdge(edges);
             if (!isResize && !movable)
                 return; // a fixed tile: refuse the drag, click still focuses
+            // Drag-handle mode: only a press on the handle (the caption strip by
+            // default) moves the tile. Anywhere else the press is claimed (no group
+            // drag) but starts nothing, so the body keeps its own behaviour — a
+            // table scrolls, a legend clicks.
+            if (!isResize && dragHandle !== null && !pressOnDragHandle(dragHandle, target, hostEl, cx, cy))
+                return;
             // Arm the glide class NOW, a full task before any displacement can
             // happen: a transition defined in the same style recalc as the first
             // left/top write does not run (CSS transitions fire only when the
@@ -2114,6 +2147,17 @@ export function bindDashboardGrid(api, group, options = {}) {
             api.renderNow();
         },
         getStatic: () => isStatic,
+        setDragHandle(v) {
+            const sel = dragHandleSelector(v);
+            if (sel === dragHandle)
+                return;
+            dragHandle = sel;
+            if (gesture)
+                cancelActiveGesture(false);
+            api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle !== null);
+            api.renderNow();
+        },
+        getDragHandle: () => dragHandleValue(dragHandle),
         saveLayout() {
             const saved = engine.saveLayout();
             return {
@@ -2154,6 +2198,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 responsive: !!responsive && !responsivePinned,
                 fluid,
                 static: isStatic,
+                dragHandle: dragHandleValue(dragHandle),
                 capacity,
                 gap,
                 padding,

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' | 'designHeight' | 'baseRowHeight' | 'dragOut' | 'removeZone' | 'onRemoveRequest' | 'onDropIn' | 'onGesture'> {
+export interface DashboardSplitOptions extends Pick<DashboardGridOptions, 'columns' | 'gap' | 'padding' | 'rtl' | 'fluid' | 'static' | 'dragHandle' | 'designHeight' | 'baseRowHeight' | 'dragOut' | 'removeZone' | 'onRemoveRequest' | 'onDropIn' | 'onGesture'> {
     /** An authored tree. Default: the persisted one, else derived from the members' cells. */
     tree?: SplitNode | null;
 }

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

@@ -25,6 +25,7 @@
 import { __awaiter } from "tslib";
 import { Command } from '@grafloria/engine';
 import { LiveRegionController, registerTool } from '@grafloria/renderer';
+import { dragHandleSelector, dragHandleValue, pressOnDragHandle, DRAG_HANDLE_CLASS } from './grid-binder.js';
 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';
@@ -91,6 +92,8 @@ export function bindDashboardSplit(api, group, options = {}) {
     const fluid = options.fluid === true;
     let rtl = options.rtl === true;
     let isStatic = options.static === true;
+    let dragHandle = dragHandleSelector(options.dragHandle);
+    api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle !== null);
     let designH = (_h = (_f = options.designHeight) !== null && _f !== void 0 ? _f : (_g = group.size) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : 0;
     let designW = (_k = (_j = group.size) === null || _j === void 0 ? void 0 : _j.width) !== null && _k !== void 0 ? _k : 0;
     let disposed = false;
@@ -111,6 +114,8 @@ export function bindDashboardSplit(api, group, options = {}) {
         w: api.container.clientWidth || 0,
         h: api.container.clientHeight || 0,
     });
+    /** Reentrancy guard: our own frame write must not re-project through bounds:changed. */
+    let writing = false;
     /** FLUID: the frame is the container, both axes. Returns true when it changed. */
     const applyFluidFrame = () => {
         if (!fluid || disposed)
@@ -124,7 +129,13 @@ export function bindDashboardSplit(api, group, options = {}) {
             return false;
         designW = box.w;
         designH = height;
-        diagram.runSystemWrite(() => group.setFrame({ x: f.x, y: f.y, width: box.w, height }));
+        writing = true;
+        try {
+            diagram.runSystemWrite(() => group.setFrame({ x: f.x, y: f.y, width: box.w, height }));
+        }
+        finally {
+            writing = false;
+        }
         return true;
     };
     // -- the tree ---------------------------------------------------------------
@@ -622,6 +633,16 @@ export function bindDashboardSplit(api, group, options = {}) {
                 return;
             if (((_g = node.getMetadata) === null || _g === void 0 ? void 0 : _g.call(node, 'widgetMovable')) === false)
                 return;
+            // Drag-handle mode: only the handle (the caption strip by default) lifts
+            // a widget out — see pressOnDragHandle in grid-binder.
+            if (dragHandle !== null) {
+                const src = ev.source;
+                const cr = api.container.getBoundingClientRect();
+                const cx = typeof (src === null || src === void 0 ? void 0 : src.clientX) === 'number' ? src.clientX : cr.left + ev.screen.x;
+                const cy = typeof (src === null || src === void 0 ? void 0 : src.clientY) === 'number' ? src.clientY : cr.top + ev.screen.y;
+                if (!pressOnDragHandle(dragHandle, target, hostOf(node.id), cx, cy))
+                    return;
+            }
             const tree = readTree();
             gesture = {
                 kind: 'move',
@@ -840,6 +861,32 @@ export function bindDashboardSplit(api, group, options = {}) {
     api.container.addEventListener('focusin', onFocusIn);
     api.container.addEventListener('keydown', onKey);
     // -- observers --------------------------------------------------------------
+    // THE GROUP'S FRAME IS THE BOARD. When it moves — a view parked off-camera by
+    // showView, a container re-slotted by its parent, an external resize — the
+    // widgets must follow, exactly as the grid binder's do. Without this the
+    // parked view's hosts stayed on camera under the shown view (the Angular
+    // conformance drive: the sales cards bleeding through the ops tab). Member
+    // churn re-reconciles the tree the same way.
+    const groupSubs = [
+        group.on('bounds:changed', (() => {
+            if (disposed || writing)
+                return;
+            project();
+            api.render();
+        })),
+        group.on('member:added', (() => {
+            if (disposed)
+                return;
+            project(reconcile());
+            api.render();
+        })),
+        group.on('member:removed', (() => {
+            if (disposed)
+                return;
+            project(reconcile());
+            api.render();
+        })),
+    ];
     const containerObserver = fluid && typeof ResizeObserver !== 'undefined'
         ? new ResizeObserver(() => {
             if (disposed)
@@ -902,6 +949,16 @@ export function bindDashboardSplit(api, group, options = {}) {
             api.renderNow();
         },
         getStatic: () => isStatic,
+        setDragHandle(v) {
+            const sel = dragHandleSelector(v);
+            if (sel === dragHandle)
+                return;
+            dragHandle = sel;
+            cancelActiveGesture();
+            api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle !== null);
+            api.renderNow();
+        },
+        getDragHandle: () => dragHandleValue(dragHandle),
         focusWidget(id) {
             var _a, _b, _c;
             if (!((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id))
@@ -924,6 +981,7 @@ export function bindDashboardSplit(api, group, options = {}) {
                 responsive: false,
                 fluid,
                 static: isStatic,
+                dragHandle: dragHandleValue(dragHandle),
                 capacity: undefined,
                 gap,
                 padding,
@@ -1023,6 +1081,8 @@ export function bindDashboardSplit(api, group, options = {}) {
             api.container.removeEventListener('keydown', onKey);
             containerObserver === null || containerObserver === void 0 ? void 0 : containerObserver.disconnect();
             hostObserver === null || hostObserver === void 0 ? void 0 : hostObserver.disconnect();
+            for (const off of groupSubs)
+                off();
             for (const el of dividerEls)
                 el.remove();
             dividerEls.length = 0;

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

@@ -177,6 +177,14 @@ const CSS = `
   text-transform: uppercase;
   color: var(--axdb-muted);
 }
+/* Drag-handle mode (DevExpress drags an item by its caption): the header is
+   the grip and says so with a dot pattern and a grab cursor; the body keeps
+   its own cursor because a press there starts nothing. */
+.axdb-drag-handle .axdb-widget > .axdb-widget-h { cursor: grab; }
+.axdb-drag-handle .axdb-widget > .axdb-widget-h::before {
+  content: ''; flex: none; width: 8px; height: 12px; opacity: .55;
+  background: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 0 / 4px 4px;
+}
 .axdb-widget-b { flex: 1; min-height: 0; position: relative; }
 .axdb-widget-b > svg { display: block; width: 100%; height: 100%; }
 .axdb-widget-b.axdb-scroll { overflow: auto; }