@grafloria/element 0.4.34 → 0.4.36

package/package.json

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

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

@@ -626,6 +626,9 @@ export interface DashboardHandleContext {
     active: string;
     /** MUTABLE — set by the caller's finalize once the render API exists. */
     apiRef: DashboardApiRef | null;
+    /** MUTABLE — the canvas element, set with apiRef; parking a page or a view
+     *  reaches the html layer through it (see `teleport`). */
+    container: HTMLElement | null;
     /** The consumer's layout hook, if any (dashboard() passes its option). */
     onLayoutChange?: (viewId: string, widgets: DashboardWidgetSpec[]) => void;
     /**

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

@@ -184,6 +184,29 @@ class SetWidgetLockCommand extends Command {
 const HISTORY_EVENTS = ['command:executed', 'command:undone', 'command:redone'];
 const DEFAULTS = { columns: 12, gap: 8, rowHeight: 130, width: 1180, height: 660 };
 const OFFSCREEN_X = -20000;
+/**
+ * Parking is a TELEPORT, never a glide. `.axdb-glide` on the html layer eases
+ * every left/top write while a gesture runs and for 400 ms past its drop; a
+ * page or a view coming back from OFFSCREEN_X under it SLID in from 20,000 px
+ * away over 280 ms (0.4.36). The class comes off for the writes, the styles
+ * are flushed so the landing becomes the before-change state, and the class
+ * goes back to whichever gesture still holds it.
+ */
+const teleport = (container, fn) => {
+    const layer = container === null || container === void 0 ? void 0 : container.querySelector('.grafloria-html-layer');
+    const held = (layer === null || layer === void 0 ? void 0 : layer.classList.contains('axdb-glide')) === true;
+    if (held)
+        layer.classList.remove('axdb-glide');
+    try {
+        fn();
+    }
+    finally {
+        if (held && layer) {
+            void layer.offsetWidth; // flush: the new positions are the before-change style now
+            layer.classList.add('axdb-glide');
+        }
+    }
+};
 let autoId = 0;
 /** The node a widget spec becomes — one place, so addWidget() and the initial
  *  spec build can never drift apart on metadata. */
@@ -1100,6 +1123,7 @@ export function createDashboardHandle(ctx) {
             },
             joinTargets: [...ctx.layoutOf.keys()].filter((id) => { var _a, _b; return id !== containerId && id !== pageId && ((_a = ctx.layoutOf.get(id)) !== null && _a !== void 0 ? _a : (_b = specById.get(id)) === null || _b === void 0 ? void 0 : _b.layout) === 'tabs' && !!model.getGroup(id) && !insidePage(id); }),
             stripHeight: (targetId) => tabStripReserve(ctx.tabsOf.get(targetId), Math.max(1, liveCount(targetId))),
+            ownBoards: [pageId, ...[...ctx.boardGroups.keys()].filter((id) => insidePage(id))],
             stripIndex: (targetId, cx, cy) => {
                 const strip = ctx.tabStrips.get(targetId);
                 if (!strip)
@@ -1304,18 +1328,20 @@ export function createDashboardHandle(ctx) {
             return ctx.active;
         },
         showView(id) {
-            var _a, _b, _c;
             if (!groups.has(id))
                 return;
             ctx.active = id;
-            for (const [vid, g] of groups) {
-                const x = vid === id ? 0 : OFFSCREEN_X;
-                const s = (_a = g.size) !== null && _a !== void 0 ? _a : { width: ctx.boardW, height: ctx.boardH };
-                if (g.position.x !== x)
-                    g.setFrame({ x, y: 0, width: s.width, height: s.height });
-            }
-            (_b = binders.get(id)) === null || _b === void 0 ? void 0 : _b.sync();
-            (_c = ctx.apiRef) === null || _c === void 0 ? void 0 : _c.renderNow();
+            teleport(ctx.container, () => {
+                var _a, _b, _c;
+                for (const [vid, g] of groups) {
+                    const x = vid === id ? 0 : OFFSCREEN_X;
+                    const s = (_a = g.size) !== null && _a !== void 0 ? _a : { width: ctx.boardW, height: ctx.boardH };
+                    if (g.position.x !== x)
+                        g.setFrame({ x, y: 0, width: s.width, height: s.height });
+                }
+                (_b = binders.get(id)) === null || _b === void 0 ? void 0 : _b.sync();
+                (_c = ctx.apiRef) === null || _c === void 0 ? void 0 : _c.renderNow();
+            });
             frameView(groups.get(id));
         },
         widget(id) {
@@ -1410,7 +1436,7 @@ export function createDashboardHandle(ctx) {
         },
         getCaption: (id) => { var _a; return (_a = specById.get(id)) === null || _a === void 0 ? void 0 : _a.caption; },
         activateTab(containerId, pageId) {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e;
             const cg = ctx.boardGroups.get(containerId);
             const w = specById.get(containerId);
             if (!cg || !w || ((_a = ctx.layoutOf.get(containerId)) !== null && _a !== void 0 ? _a : w.layout) !== 'tabs')
@@ -1423,9 +1449,12 @@ export function createDashboardHandle(ctx) {
             w.active = pageId;
             const cw = (_c = cg.getMetadata('containerWidget')) !== null && _c !== void 0 ? _c : {};
             cg.setMetadata('containerWidget', Object.assign(Object.assign({}, cw), { active: pageId }));
-            (_d = ctx.syncTabs) === null || _d === void 0 ? void 0 : _d.call(ctx, containerId);
-            (_e = ctx.apiRef) === null || _e === void 0 ? void 0 : _e.renderNow();
-            (_f = ctx.onTabChange) === null || _f === void 0 ? void 0 : _f.call(ctx, containerId, pageId, (_g = ctx.viewOfBoard.get(containerId)) !== null && _g !== void 0 ? _g : ctx.active);
+            teleport(ctx.container, () => {
+                var _a, _b;
+                (_a = ctx.syncTabs) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+                (_b = ctx.apiRef) === null || _b === void 0 ? void 0 : _b.renderNow();
+            });
+            (_d = ctx.onTabChange) === null || _d === void 0 ? void 0 : _d.call(ctx, containerId, pageId, (_e = ctx.viewOfBoard.get(containerId)) !== null && _e !== void 0 ? _e : ctx.active);
             reportChanged();
             return true;
         },
@@ -1921,6 +1950,7 @@ export function dashboard(options) {
         optionsBase: options,
         active: (_p = (_o = views[0]) === null || _o === void 0 ? void 0 : _o.id) !== null && _p !== void 0 ? _p : 'main',
         apiRef: null,
+        container: null,
         onLayoutChange: options.onLayoutChange,
     };
     const { binders, groups } = ctx;
@@ -1935,24 +1965,25 @@ export function dashboard(options) {
         }, get handle() {
             return handle;
         }, finalize: (api) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
             const a = api;
             if (!a)
                 return;
             ctx.apiRef = a;
+            ctx.container = (_a = a.container) !== null && _a !== void 0 ? _a : null;
             const model = a.getModel();
             // FLUID: the board starts at the container's box when it can be measured
             // (the binder keeps it there); the authored defaults only fill in for a
             // container with no size yet.
             const box = mode === 'fluid'
-                ? { w: ((_a = a.container) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, h: ((_b = a.container) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0 }
+                ? { w: ((_b = a.container) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0, h: ((_c = a.container) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0 }
                 : { w: 0, h: 0 };
             const viewW = (v) => { var _a; return (mode === 'fluid' && box.w > 0 ? box.w : (_a = v.width) !== null && _a !== void 0 ? _a : boardW); };
             const viewH = (v) => { var _a; return (mode === 'fluid' && box.h > 0 ? box.h : (_a = v.height) !== null && _a !== void 0 ? _a : boardH); };
             for (const v of views) {
                 // One board per view; the group is a pure LAYOUT CONTAINER, so its
                 // chrome is suppressed (frameChrome) exactly as a dashboard needs.
-                const g = new GroupModel({ id: v.id, name: (_c = v.name) !== null && _c !== void 0 ? _c : v.id });
+                const g = new GroupModel({ id: v.id, name: (_d = v.name) !== null && _d !== void 0 ? _d : v.id });
                 model.addGroup(g);
                 g.setMetadata('frameChrome', 'none');
                 // THE BOARD'S GEOMETRY, PERSISTED. Cells alone do not describe a board:
@@ -1962,28 +1993,28 @@ export function dashboard(options) {
                 // reload would be a picture of a dashboard rather than a dashboard.
                 // Serializable values only: the binder's callbacks belong to the app.
                 g.setMetadata('dashboardBoard', {
-                    columns: (_d = v.columns) !== null && _d !== void 0 ? _d : columns,
+                    columns: (_e = v.columns) !== null && _e !== void 0 ? _e : columns,
                     gap,
                     padding: gap,
                     sizing,
                     baseRowHeight: rowHeight,
                     designHeight: viewH(v),
-                    float: (_e = options.float) !== null && _e !== void 0 ? _e : false,
-                    rtl: (_f = options.rtl) !== null && _f !== void 0 ? _f : false,
+                    float: (_f = options.float) !== null && _f !== void 0 ? _f : false,
+                    rtl: (_g = options.rtl) !== null && _g !== void 0 ? _g : false,
                     fluid: mode === 'fluid',
                     overflow,
-                    static: (_g = options.static) !== null && _g !== void 0 ? _g : false,
-                    dragHandle: (_h = options.dragHandle) !== null && _h !== void 0 ? _h : false,
-                    layout: (_j = ctx.layoutOf.get(v.id)) !== null && _j !== void 0 ? _j : layout,
+                    static: (_h = options.static) !== null && _h !== void 0 ? _h : false,
+                    dragHandle: (_j = options.dragHandle) !== null && _j !== void 0 ? _j : false,
+                    layout: (_k = ctx.layoutOf.get(v.id)) !== null && _k !== void 0 ? _k : layout,
                 });
-                if (((_k = ctx.layoutOf.get(v.id)) !== null && _k !== void 0 ? _k : layout) === 'split' && v.tree !== undefined)
+                if (((_l = ctx.layoutOf.get(v.id)) !== null && _l !== void 0 ? _l : 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, (_l = ctx.layoutOf.get(v.id)) !== null && _l !== void 0 ? _l : layout));
+                binders.set(v.id, bindView(v, g, (_m = ctx.layoutOf.get(v.id)) !== null && _m !== void 0 ? _m : layout));
             }
             // LIVE LAYOUT SWITCH (setLayout): keep the picture, swap the binder.
             // Either way the outgoing binder's cells are written where the grid
@@ -2099,8 +2130,8 @@ export function dashboard(options) {
             // runs. That cost me a debugging round: `ctx.syncTabs` stayed undefined
             // and every tab switch silently did nothing.)
             ctx.onTabChange = options.onTabChange;
-            attachTabsRuntime(ctx, model, (_m = a.container) !== null && _m !== void 0 ? _m : null, handle);
-            (_o = ctx.attachHistory) === null || _o === void 0 ? void 0 : _o.call(ctx);
+            attachTabsRuntime(ctx, model, (_o = a.container) !== null && _o !== void 0 ? _o : null, handle);
+            (_p = ctx.attachHistory) === null || _p === void 0 ? void 0 : _p.call(ctx);
             return;
             /**
              * Mount one board's widgets into its group — and recurse for CONTAINERS.

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

@@ -569,6 +569,8 @@ export interface TearOutPlan {
     stripIndex(targetId: string, clientX: number, clientY: number): number | null;
     /** The strip's height on `targetId`, px — the band above its body. */
     stripHeight(targetId: string): number;
+    /** The page itself and every board inside it — never a board the page can land on. */
+    ownBoards: string[];
     /** The commands that REORDER the page to `index` along its own strip. Empty when nothing changes. */
     reorder(index: number): Command[];
     /**
@@ -661,6 +663,10 @@ interface AdoptedLeg {
     }): boolean;
     /** Every other tile's cell before the ghost entered — the layout a row insert translates. */
     baseline(): Map<string, CellRect>;
+    /** Where the tile sits right now, or null while it is off the board. */
+    cell(): CellRect | null;
+    /** That cell in world space, by the adopting board's own geometry. */
+    rect(): WorldRect | null;
     /** Undo the adoption: target board back to its pre-entry layout. */
     abort(): void;
     /**