@grafloria/element 0.4.5 → 0.4.7

package/package.json

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

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

@@ -44,6 +44,7 @@
  */
 import { GroupModel, NodeModel, type GridColumnLayout } from '@grafloria/engine';
 import { type DashboardGridHandle, type DashboardGridOptions, type DashboardResponsiveOptions } from './grid-binder.js';
+import type { DragHandleOption } from './grid-binder.js';
 import type { SplitNode } from './split-layout.js';
 /** A widget, declared as data. */
 export interface DashboardWidgetSpec {
@@ -189,13 +190,15 @@ export interface DashboardOptions {
      */
     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()`.
+     * DRAG HANDLE — DevExpress drags an item by its caption. `true`: the caption
+     * strip is the only handle (the header shows grip dots); a selector string:
+     * your own element inside the card; `{ grip: true, position, placement }`:
+     * a painted grip, left / center / right along the top edge, `inside` the
+     * header band or `outside` as a tab above the card; off (default): the
+     * whole card. Resize edges and the keyboard are unaffected; the body stays
+     * interactive. Live: `handle.setDragHandle()`.
      */
-    dragHandle?: boolean | string;
+    dragHandle?: DragHandleOption;
     /**
      * 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
@@ -295,9 +298,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;
+    /** Drag-handle mode, live, every view: `true` = the caption strip, a selector = your own handle, `{ grip: true, … }` = a painted grip, `false` = the whole card. */
+    setDragHandle(v: DragHandleOption): void;
+    getDragHandle(): DragHandleOption;
     /**
      * 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/grid-binder.d.ts

@@ -214,19 +214,42 @@ export interface DashboardGridOptions {
     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`.
+     * `handle`). `true` — the CAPTION STRIP is the handle (the header shows grip
+     * dots); a selector string — your own element inside the host; a
+     * `{ grip: true }` object — a dedicated GRIP the kit paints, positioned
+     * left / center / right and, for the top edge, `inside` the header band or
+     * `outside` as a tab above the card (the DevExpress item bar). Off
+     * (default): the whole card. Resize edges are unaffected and the body stays
+     * interactive (scroll a table, click a legend). Live: `setDragHandle`.
      */
-    dragHandle?: boolean | string;
+    dragHandle?: DragHandleOption;
 }
-/** 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. */
+/** A painted grip: the only drag zone, placed along the card's top edge. */
+export interface DragGripOptions {
+    grip: true;
+    /** Where along the top edge. Default 'left'. */
+    position?: 'left' | 'center' | 'right';
+    /** In the header band, or a tab above the card. Default 'inside'. */
+    placement?: 'inside' | 'outside';
+}
+export type DragHandleOption = boolean | string | DragGripOptions;
+/** The class of the painted grip element (a child of the node host). */
+export declare const GRIP_CLASS = "axdb-grip";
+/** The container class that turns the caption strip's grip dots on. */
 export declare const DRAG_HANDLE_CLASS = "axdb-drag-handle";
+/** A `dragHandle` value with its defaults filled in — the form the handle reports. */
+export declare const normalizeDragHandle: (v: DragHandleOption | undefined) => DragHandleOption;
+/** The selector a `dragHandle` value names — `null` when the whole card is the handle. */
+export declare const dragHandleSelector: (v: DragHandleOption) => string | null;
+/** The grip config of a value, or null when it paints no grip. */
+export declare const gripOf: (v: DragHandleOption) => DragGripOptions | null;
+/**
+ * Paint (or remove) the grip on one host, and stamp the host with the grip's
+ * placement so the header can make room for it. `movable` false = no grip.
+ */
+export declare function syncGrip(host: HTMLElement, cfg: DragGripOptions | null, movable: boolean): void;
+/** The member host a press on a painted grip belongs to (the grip may sit OUTSIDE the host's box). */
+export declare function gripHostOf(target: Element | null): HTMLElement | null;
 /**
  * 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
@@ -266,9 +289,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;
+    /** Drag-handle mode, live: `true` = the caption strip, a selector = your own handle, `{ grip: true, … }` = a painted grip, `false` = the whole card. */
+    setDragHandle(v: DragHandleOption): void;
+    getDragHandle(): DragHandleOption;
     /**
      * 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.
@@ -295,8 +318,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;
+        /** `true` = the caption strip, a selector = a custom one, `{ grip: true, … }` = a painted grip, `false` = the whole card. */
+        dragHandle: DragHandleOption;
         /** Fit-mode row capacity (undefined when unbounded). */
         capacity: number | undefined;
         gap: number;

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

@@ -54,12 +54,49 @@ 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. */
+/** The class of the painted grip element (a child of the node host). */
+export const GRIP_CLASS = 'axdb-grip';
+/** The container class that turns the caption strip's grip dots on. */
 export const DRAG_HANDLE_CLASS = 'axdb-drag-handle';
+/** A `dragHandle` value with its defaults filled in — the form the handle reports. */
+export const normalizeDragHandle = (v) => {
+    var _a, _b;
+    return typeof v === 'object' && v !== null && v.grip
+        ? { grip: true, position: (_a = v.position) !== null && _a !== void 0 ? _a : 'left', placement: (_b = v.placement) !== null && _b !== void 0 ? _b : 'inside' }
+        : v === true ? true : typeof v === 'string' && v.length > 0 ? v : false;
+};
+/** 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 : typeof v === 'object' ? '.' + GRIP_CLASS : null;
+/** The grip config of a value, or null when it paints no grip. */
+export const gripOf = (v) => (typeof v === 'object' ? v : null);
+const sameDragHandle = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+/**
+ * Paint (or remove) the grip on one host, and stamp the host with the grip's
+ * placement so the header can make room for it. `movable` false = no grip.
+ */
+export function syncGrip(host, cfg, movable) {
+    var _a, _b, _c, _d, _e;
+    const existing = host.querySelector(':scope > .' + GRIP_CLASS);
+    host.classList.remove('axdb-gp-inside', 'axdb-gp-outside', 'axdb-gp-left', 'axdb-gp-center', 'axdb-gp-right');
+    if (!cfg || !movable) {
+        existing === null || existing === void 0 ? void 0 : existing.remove();
+        return;
+    }
+    const el = (_a = existing) !== null && _a !== void 0 ? _a : host.ownerDocument.createElement('div');
+    if (!existing) {
+        el.setAttribute('aria-hidden', 'true');
+        el.setAttribute('title', 'Drag');
+        host.appendChild(el);
+    }
+    el.className = `${GRIP_CLASS} ${GRIP_CLASS}--${(_b = cfg.position) !== null && _b !== void 0 ? _b : 'left'} ${GRIP_CLASS}--${(_c = cfg.placement) !== null && _c !== void 0 ? _c : 'inside'}`;
+    host.classList.add(`axdb-gp-${(_d = cfg.placement) !== null && _d !== void 0 ? _d : 'inside'}`, `axdb-gp-${(_e = cfg.position) !== null && _e !== void 0 ? _e : 'left'}`);
+}
+/** The member host a press on a painted grip belongs to (the grip may sit OUTSIDE the host's box). */
+export function gripHostOf(target) {
+    var _a, _b;
+    const grip = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.' + GRIP_CLASS);
+    return (_b = grip === null || grip === void 0 ? void 0 : grip.closest('.grafloria-node-host')) !== null && _b !== void 0 ? _b : null;
+}
 /**
  * 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
@@ -208,8 +245,9 @@ 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);
+    let dragHandle = normalizeDragHandle(options.dragHandle);
+    let dragSel = dragHandleSelector(dragHandle);
+    api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle === true);
     /** The member the ROVING TABINDEX rests on (one tab stop per board). */
     let focusedId;
     const live = liveRegionFor(api.container);
@@ -598,11 +636,18 @@ export function bindDashboardGrid(api, group, options = {}) {
             host.setAttribute('tabindex', id === stop ? '0' : '-1');
         }
     };
+    /**
+     * The chrome on every member host: the painted grip (or none) and the corner
+     * resize handle — ONE host lookup per member, which the host observer's
+     * budget counts (a repaint of one host must cost that host's lookup, not a
+     * second pass).
+     */
     const syncHandles = (only) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         syncA11y(only);
-        if (!wantHandles || disposed)
+        if (disposed)
             return;
+        const grip = gripOf(dragHandle);
         for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
             if (only && !only.has(id))
                 continue;
@@ -612,8 +657,11 @@ export function bindDashboardGrid(api, group, options = {}) {
             const host = hostOf(id);
             if (!host)
                 continue;
+            syncGrip(host, grip, ((_b = node.state) === null || _b === void 0 ? void 0 : _b.locked) !== true && !isStatic && ((_c = node.getMetadata) === null || _c === void 0 ? void 0 : _c.call(node, 'widgetMovable')) !== false);
+            if (!wantHandles)
+                continue;
             const existing = host.querySelector(':scope > .axdb-rs');
-            if (((_b = node.state) === null || _b === void 0 ? void 0 : _b.locked) === true || isStatic || ((_c = node.getMetadata) === null || _c === void 0 ? void 0 : _c.call(node, 'widgetResizable')) === false) {
+            if (((_d = node.state) === null || _d === void 0 ? void 0 : _d.locked) === true || isStatic || ((_e = node.getMetadata) === null || _e === void 0 ? void 0 : _e.call(node, 'widgetResizable')) === false) {
                 existing === null || existing === void 0 ? void 0 : existing.remove();
                 continue;
             }
@@ -1626,29 +1674,35 @@ export function bindDashboardGrid(api, group, options = {}) {
             return insideMemberGroupFrame(ev.world.x, ev.world.y) || worldInsideBoard(ev.world.x, ev.world.y);
         },
         onPointerDown(ev, hit) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             if (gesture)
                 return; // mid-palette
-            if (!hit.node) {
+            const target = ((_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : null);
+            // A press on a painted grip names its widget by the DOM: an OUTSIDE tab
+            // sits above the card's box, where the hit test sees the gap or the
+            // neighbour above.
+            const gripHost = gripHostOf(target);
+            const gripId = (_c = gripHost === null || gripHost === void 0 ? void 0 : gripHost.getAttribute('data-node-id')) !== null && _c !== void 0 ? _c : null;
+            const onGrip = !!gripId && ((_d = group.members) !== null && _d !== void 0 ? _d : new Set()).has(gripId);
+            if (!hit.node && !onGrip) {
                 // The board's own empty area: a void click. Nothing to drag, and the
                 // selection clears exactly as a click outside any board would.
-                (_b = (_a = diagram).clearSelection) === null || _b === void 0 ? void 0 : _b.call(_a);
+                (_f = (_e = diagram).clearSelection) === null || _f === void 0 ? void 0 : _f.call(_e);
                 api.render();
                 return;
             }
-            const node = diagram.getNode(hit.node.id);
-            if (!node || ((_c = node.state) === null || _c === void 0 ? void 0 : _c.locked) === true)
+            const node = diagram.getNode(onGrip ? gripId : hit.node.id);
+            if (!node || ((_g = node.state) === null || _g === void 0 ? void 0 : _g.locked) === true)
                 return; // pinned: refuse; click still focuses
             if (isStatic)
                 return; // a static board: claimed and deadened, click still focuses
             // Which edges did the press take? The corner handle names its own (s+e,
             // or s+w on RTL); a bare press within EDGE_GRIP of the tile's border
-            // takes that border; anywhere else is a move.
-            const target = ((_e = (_d = ev.source) === null || _d === void 0 ? void 0 : _d.target) !== null && _e !== void 0 ? _e : null);
-            const onHandle = !!((_f = target === null || target === void 0 ? void 0 : target.closest) === null || _f === void 0 ? void 0 : _f.call(target, '.axdb-rs'));
+            // takes that border; anywhere else is a move. A grip press is a move.
+            const onHandle = !!((_h = target === null || target === void 0 ? void 0 : target.closest) === null || _h === void 0 ? void 0 : _h.call(target, '.axdb-rs'));
             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;
+            const resizable = ((_j = node.getMetadata) === null || _j === void 0 ? void 0 : _j.call(node, 'widgetResizable')) !== false;
+            const movable = ((_k = node.getMetadata) === null || _k === void 0 ? void 0 : _k.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.
@@ -1657,7 +1711,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             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 (resizable && !onGrip) {
                 if (onHandle)
                     edges = rtl ? { n: false, e: false, s: true, w: true } : { n: false, e: true, s: true, w: false };
                 else if (hostEl)
@@ -1666,11 +1720,11 @@ export function bindDashboardGrid(api, group, options = {}) {
             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))
+            // Drag-handle mode: only a press on the handle (the caption strip, a
+            // custom element, or the painted grip) 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 && dragSel !== null && !pressOnDragHandle(dragSel, 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
@@ -1696,7 +1750,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 startSize: { width: node.size.width, height: node.size.height },
                 startPos: { x: node.position.x, y: node.position.y },
                 edges,
-                spans: { w: (_j = it === null || it === void 0 ? void 0 : it.w) !== null && _j !== void 0 ? _j : 1, h: (_k = it === null || it === void 0 ? void 0 : it.h) !== null && _k !== void 0 ? _k : 1 },
+                spans: { w: (_l = it === null || it === void 0 ? void 0 : it.w) !== null && _l !== void 0 ? _l : 1, h: (_m = it === null || it === void 0 ? void 0 : it.h) !== null && _m !== void 0 ? _m : 1 },
                 removedFromBoard: false,
                 leg: null,
                 lastWorld: null,
@@ -2148,16 +2202,18 @@ export function bindDashboardGrid(api, group, options = {}) {
         },
         getStatic: () => isStatic,
         setDragHandle(v) {
-            const sel = dragHandleSelector(v);
-            if (sel === dragHandle)
+            const next = normalizeDragHandle(v);
+            if (sameDragHandle(next, dragHandle))
                 return;
-            dragHandle = sel;
+            dragHandle = next;
+            dragSel = dragHandleSelector(next);
             if (gesture)
                 cancelActiveGesture(false);
-            api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle !== null);
+            api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle === true);
+            syncHandles();
             api.renderNow();
         },
-        getDragHandle: () => dragHandleValue(dragHandle),
+        getDragHandle: () => (typeof dragHandle === 'object' ? Object.assign({}, dragHandle) : dragHandle),
         saveLayout() {
             const saved = engine.saveLayout();
             return {
@@ -2198,7 +2254,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 responsive: !!responsive && !responsivePinned,
                 fluid,
                 static: isStatic,
-                dragHandle: dragHandleValue(dragHandle),
+                dragHandle: typeof dragHandle === 'object' ? Object.assign({}, dragHandle) : dragHandle,
                 capacity,
                 gap,
                 padding,

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

@@ -1,4 +1,4 @@
-export { bindDashboardGrid, type DashboardGridApi, type DashboardGridOptions, type DashboardGridHandle, type DashboardResponsiveOptions, } from './grid-binder.js';
+export { bindDashboardGrid, type DashboardGridApi, type DashboardGridOptions, type DashboardGridHandle, type DashboardResponsiveOptions, type DragHandleOption, type DragGripOptions, normalizeDragHandle, } from './grid-binder.js';
 export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, type DashboardSplitOptions, type DashboardSplitHandle, } from './split-binder.js';
 export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, type SplitNode, type SplitGroup, type SplitLeaf, type SplitDir, type SplitSide, type SplitDivider, } from './split-layout.js';
 export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, type CellRect, type WorldRect, type DashboardGridGeometry, type TileDelta, } from './grid-mapping.js';

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

@@ -1,4 +1,4 @@
-export { bindDashboardGrid, } from './grid-binder.js';
+export { bindDashboardGrid, normalizeDragHandle, } from './grid-binder.js';
 export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, } from './split-binder.js';
 export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, } from './split-layout.js';
 export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, } from './grid-mapping.js';

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

@@ -25,7 +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 { dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, pressOnDragHandle, syncGrip, 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';
@@ -92,8 +92,9 @@ 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 dragHandle = normalizeDragHandle(options.dragHandle);
+    let dragSel = dragHandleSelector(dragHandle);
+    api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle === true);
     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;
@@ -369,7 +370,7 @@ export function bindDashboardSplit(api, group, options = {}) {
         return `${Math.round((r.width / f.width) * 100)} percent wide, ${Math.round((r.height / f.height) * 100)} percent tall`;
     };
     const syncA11y = () => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (disposed)
             return;
         const order = splitLeaves(paintedTree()).filter((id) => !!diagram.getNode(id));
@@ -377,6 +378,13 @@ export function bindDashboardSplit(api, group, options = {}) {
         // that carried the grid's handle (a board switched live) sheds it here.
         for (const id of order)
             (_b = (_a = hostOf(id)) === null || _a === void 0 ? void 0 : _a.querySelector(':scope > .axdb-rs')) === null || _b === void 0 ? void 0 : _b.remove();
+        // The painted grip (or none), on every leaf host.
+        for (const id of order) {
+            const host = hostOf(id);
+            const node = diagram.getNode(id);
+            if (host && node)
+                syncGrip(host, gripOf(dragHandle), ((_c = node.state) === null || _c === void 0 ? void 0 : _c.locked) !== true && !isStatic && ((_d = node.getMetadata) === null || _d === void 0 ? void 0 : _d.call(node, 'widgetMovable')) !== false);
+        }
         if (focusedId && !order.includes(focusedId))
             focusedId = undefined;
         const stop = focusedId !== null && focusedId !== void 0 ? focusedId : order[0];
@@ -592,7 +600,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             return worldInsideBoard(ev.world.x, ev.world.y);
         },
         onPointerDown(ev, hit) {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             if (gesture)
                 return;
             const target = ((_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : null);
@@ -623,24 +631,28 @@ export function bindDashboardSplit(api, group, options = {}) {
                 api.container.style.cursor = d.dir === 'row' ? 'col-resize' : 'row-resize';
                 return;
             }
-            if (!hit.node) {
-                (_e = (_d = diagram).clearSelection) === null || _e === void 0 ? void 0 : _e.call(_d);
+            // A press on a painted grip names its widget by the DOM (an outside tab
+            // sits above the card's box) — see grid-binder.
+            const gripId = (_e = (_d = gripHostOf(target)) === null || _d === void 0 ? void 0 : _d.getAttribute('data-node-id')) !== null && _e !== void 0 ? _e : null;
+            const onGrip = !!gripId && ((_f = group.members) !== null && _f !== void 0 ? _f : new Set()).has(gripId);
+            if (!hit.node && !onGrip) {
+                (_h = (_g = diagram).clearSelection) === null || _h === void 0 ? void 0 : _h.call(_g);
                 api.render();
                 return;
             }
-            const node = diagram.getNode(hit.node.id);
-            if (!node || ((_f = node.state) === null || _f === void 0 ? void 0 : _f.locked) === true || isStatic)
+            const node = diagram.getNode(onGrip ? gripId : hit.node.id);
+            if (!node || ((_j = node.state) === null || _j === void 0 ? void 0 : _j.locked) === true || isStatic)
                 return;
-            if (((_g = node.getMetadata) === null || _g === void 0 ? void 0 : _g.call(node, 'widgetMovable')) === false)
+            if (((_k = node.getMetadata) === null || _k === void 0 ? void 0 : _k.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) {
+            // Drag-handle mode: only the handle (the caption strip, a custom element
+            // or the painted grip) lifts a widget out — see pressOnDragHandle.
+            if (dragSel !== 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))
+                if (!pressOnDragHandle(dragSel, target, hostOf(node.id), cx, cy))
                     return;
             }
             const tree = readTree();
@@ -950,15 +962,17 @@ export function bindDashboardSplit(api, group, options = {}) {
         },
         getStatic: () => isStatic,
         setDragHandle(v) {
-            const sel = dragHandleSelector(v);
-            if (sel === dragHandle)
+            const next = normalizeDragHandle(v);
+            if (JSON.stringify(next) === JSON.stringify(dragHandle))
                 return;
-            dragHandle = sel;
+            dragHandle = next;
+            dragSel = dragHandleSelector(next);
             cancelActiveGesture();
-            api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle !== null);
+            api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle === true);
+            syncA11y();
             api.renderNow();
         },
-        getDragHandle: () => dragHandleValue(dragHandle),
+        getDragHandle: () => (typeof dragHandle === 'object' ? Object.assign({}, dragHandle) : dragHandle),
         focusWidget(id) {
             var _a, _b, _c;
             if (!((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id))
@@ -981,7 +995,7 @@ export function bindDashboardSplit(api, group, options = {}) {
                 responsive: false,
                 fluid,
                 static: isStatic,
-                dragHandle: dragHandleValue(dragHandle),
+                dragHandle: typeof dragHandle === 'object' ? Object.assign({}, dragHandle) : dragHandle,
                 capacity: undefined,
                 gap,
                 padding,

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

@@ -37,7 +37,7 @@ const CSS = `
 .grafloria-html-layer > .grafloria-node-host:focus-visible {
   outline: 2px solid #3b52d9;
   outline-offset: 2px;
-  border-radius: var(--axdb-rs-radius, 6px);
+  border-radius: var(--axdb-rs-radius, 3px);
 }
 
 /* ===== the held tile: transition-exempt ghost, above everything ===== */
@@ -55,7 +55,7 @@ const CSS = `
 /* ===== the placeholder: dashed slab, truthful, never animated ===== */
 .grafloria-html-layer > .axdb-ph {
   position: absolute;
-  border-radius: var(--axdb-rs-radius, 6px);
+  border-radius: var(--axdb-rs-radius, 3px);
   background: rgba(30, 34, 45, .14);
   border: 2px dashed rgba(30, 34, 45, .28);
   box-sizing: border-box;
@@ -77,7 +77,7 @@ const CSS = `
   cursor: nwse-resize;
   border-right: 3px solid rgba(120, 130, 148, .55);
   border-bottom: 3px solid rgba(120, 130, 148, .55);
-  border-bottom-right-radius: var(--axdb-rs-radius, 6px);
+  border-bottom-right-radius: var(--axdb-rs-radius, 3px);
   opacity: 0;
   transition: opacity .12s;
   z-index: 5;
@@ -95,7 +95,7 @@ const CSS = `
   border-right: none;
   border-left: 3px solid rgba(120, 130, 148, .55);
   border-bottom-right-radius: 0;
-  border-bottom-left-radius: var(--axdb-rs-radius, 6px);
+  border-bottom-left-radius: var(--axdb-rs-radius, 3px);
 }
 
 /* ===== palette drag-in chip (screen-space clone following the cursor) ===== */
@@ -144,7 +144,7 @@ const CSS = `
   padding: 13px 15px 12px;
   background: var(--axdb-card);
   border: 1px solid var(--axdb-line);
-  border-radius: var(--axdb-rs-radius, 6px);
+  border-radius: var(--axdb-rs-radius, 3px);
   box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
   font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
   color: var(--axdb-ink);
@@ -185,6 +185,28 @@ const CSS = `
   content: ''; flex: none; width: 8px; height: 12px; opacity: .55;
   background: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 0 / 4px 4px;
 }
+/* A PAINTED GRIP (dragHandle: { grip: true }): the only drag zone, a small
+   dotted tab along the card's top edge. Inside sits in the header band and
+   the header makes room for it; outside is a tab above the card, the
+   DevExpress item bar. The host must not clip it. */
+.grafloria-node-host > .axdb-grip {
+  position: absolute; z-index: 4; box-sizing: border-box; width: 24px; height: 12px;
+  border: 1px solid var(--axdb-line, #e7eaf1); border-radius: 3px; background: var(--axdb-card, #fff);
+  color: var(--axdb-muted, #5a6478); cursor: grab; opacity: .8;
+}
+.grafloria-node-host > .axdb-grip::before {
+  content: ''; position: absolute; left: 5px; top: 2px; width: 12px; height: 6px;
+  background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 4px 3px;
+}
+.grafloria-node-host:hover > .axdb-grip, .grafloria-node-host > .axdb-grip:hover { opacity: 1; border-color: #3b52d9; color: #3b52d9; }
+.grafloria-node-host > .axdb-grip--inside { top: 5px; }
+.grafloria-node-host > .axdb-grip--outside { top: -11px; height: 11px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -1px 2px rgba(16, 24, 40, .08); }
+.grafloria-node-host > .axdb-grip--left { left: 8px; }
+.grafloria-node-host > .axdb-grip--right { right: 8px; }
+.grafloria-node-host > .axdb-grip--center { left: 50%; transform: translateX(-50%); }
+.grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 24px; }
+.grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 24px; }
+.grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 10px; }
 .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; }