@grafloria/element 0.4.30 → 0.4.32

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

@@ -1254,6 +1254,8 @@ export function bindDashboardSplit(api, group, options = {}) {
         // A split board has no cells to drop a torn-out page into: it refuses,
         // and the press stays a plain tab click.
         tearOutMember: (_pageId, _fromGroupId, _ev, _plan) => false,
+        // …and it has no cells to move a section across: a strip press stays a selection.
+        dragMember: () => false,
         containsWorld: (x, y) => worldInsideBoard(x, y),
         containsWorldExtended: (x, y) => worldInsideBoard(x, y),
         frameArea: () => {

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

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

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

@@ -39,7 +39,7 @@ export declare function tabStripReserve(o: TabsOptions | undefined, pageCount: n
  * rebuild — and so a `click` listener survives between switches.
  */
 export declare function tabStripKey(pages: TabPage[], activeId: string, o: TabsOptions | undefined, rtl: boolean): string;
-export declare function paintTabStrip(strip: HTMLElement, pages: TabPage[], activeId: string, o: TabsOptions | undefined, rtl: boolean, onPick: (id: string) => void, onSelectContainer?: () => void, 
+export declare function paintTabStrip(strip: HTMLElement, pages: TabPage[], activeId: string, o: TabsOptions | undefined, rtl: boolean, onPick: (id: string) => void, onSelectContainer?: (e: PointerEvent) => void, 
 /**
  * The tab is the PAGE's drag handle, as it is in VS Code: press one and
  * travel, and the whole page leaves — not the widget under the pointer,

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

@@ -61,7 +61,7 @@ onDrag) {
         var _a;
         if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('.axdb-tab'))
             return;
-        onSelectContainer === null || onSelectContainer === void 0 ? void 0 : onSelectContainer();
+        onSelectContainer === null || onSelectContainer === void 0 ? void 0 : onSelectContainer(e);
     };
     for (const p of pages) {
         const b = doc.createElement('button');

package/src/lib/load.js

@@ -151,7 +151,15 @@ export function fromDocument(document, options = {}) {
                 // the group's slab `gridItem`, its children in its own membership.
                 const meta = ((_b = childGroup.getMetadata('containerWidget')) !== null && _b !== void 0 ? _b : {});
                 const cell = cellFromGridItem(childGroup.getMetadata('gridItem'));
-                const ws = Object.assign(Object.assign(Object.assign({ id: childGroup.id }, meta), (cell ? { x: cell.x, y: cell.y, span: cell.w, rows: cell.h } : {})), { widgets: rebuildBoard(childGroup, viewId) });
+                const inner = rebuildBoard(childGroup, viewId);
+                // A tab container's pages keep the order they were REORDERED into
+                // (`order` on the container), not the order they joined the group.
+                const order = meta.order;
+                if (Array.isArray(order)) {
+                    const rank = (id) => (order.indexOf(id) < 0 ? Number.MAX_SAFE_INTEGER : order.indexOf(id));
+                    inner.sort((p, q) => rank(p.id) - rank(q.id));
+                }
+                const ws = Object.assign(Object.assign(Object.assign({ id: childGroup.id }, meta), (cell ? { x: cell.x, y: cell.y, span: cell.w, rows: cell.h } : {})), { widgets: inner });
                 specById.set(ws.id, ws);
                 viewOfWidget.set(ws.id, g.id);
                 boardWidgets.set(ws.id, ws.widgets);