cabloy 5.1.168 → 5.1.170

package/vona/src/suite-vendor/a-cabloy/modules/a-layoutprofile/test/layoutprofile.test.ts

@@ -0,0 +1,258 @@
+import type { TableIdentity } from 'table-identity';
+
+import { catchError } from '@cabloy/utils';
+import assert from 'node:assert';
+import { randomUUID } from 'node:crypto';
+import { describe, it } from 'node:test';
+import { app } from 'vona-mock';
+
+import type { ILayoutProfile } from '../src/types/layoutprofile.ts';
+
+const actionPath = '/layoutprofile';
+
+function createTestId() {
+  return randomUUID().slice(0, 12);
+}
+
+function createProfile(name: string): ILayoutProfile {
+  return {
+    version: 1,
+    schemaFingerprint: `schema-${name}`,
+    columns: [
+      { key: 'name', visible: true, width: 'auto' },
+      { key: 'level', visible: false, width: 180 },
+    ],
+  };
+}
+
+async function performAs(accessToken: string, method: string, path: string, options = {}) {
+  return await app.bean.executor.newCtxIsolate(async () => {
+    return await (app.bean.executor.performAction as any)(method, path, {
+      ...options,
+      authToken: accessToken,
+      innerAccess: false,
+    });
+  });
+}
+
+async function registerAndSignin(name: string) {
+  const user = await app.bean.user.register({ name }, true);
+  const token = await app.bean.passport.signinMock(name as any);
+  return { token: token.accessToken, user };
+}
+
+async function deleteOwnedProfiles(userIds: readonly TableIdentity[], layoutKey: string) {
+  for (const userId of userIds) {
+    await app.scope('a-layoutprofile').model.layoutprofile.delete({ userId, layoutKey });
+  }
+}
+
+async function deleteOwnedUsers(userIds: readonly TableIdentity[]) {
+  for (const userId of userIds) {
+    await app.scope('home-user').model.roleUser.delete({ userId });
+    await app.bean.user.removeById(userId);
+  }
+}
+
+async function deleteOwnedTestData(userIds: readonly TableIdentity[], layoutKey: string) {
+  await deleteOwnedProfiles(userIds, layoutKey);
+  await deleteOwnedUsers(userIds);
+}
+
+describe('layoutprofile.test.ts', { concurrency: false }, () => {
+  it('rejects anonymous profile operations', async () => {
+    await app.bean.executor.mockCtx(async () => {
+      for (const [method, path, options] of [
+        ['get', `${actionPath}/load`, { query: { layoutKey: 'anonymous' } }],
+        [
+          'post',
+          `${actionPath}/save`,
+          { body: { layoutKey: 'anonymous', profile: createProfile('anonymous') } },
+        ],
+        ['delete', `${actionPath}/reset`, { query: { layoutKey: 'anonymous' } }],
+      ] as const) {
+        const [, error] = await catchError(() =>
+          (app.bean.executor.performAction as any)(method, path, {
+            ...options,
+            innerAccess: false,
+          }),
+        );
+        assert.equal(error?.code, 401);
+      }
+    });
+  });
+
+  it('isolates profiles by authenticated user and supports reset', async () => {
+    await app.bean.executor.mockCtx(async () => {
+      const suffix = createTestId();
+      const layoutKey = `/training/student/${suffix}`;
+      let userA: TableIdentity | undefined;
+      let userB: TableIdentity | undefined;
+      try {
+        const customerA = await registerAndSignin(`layout-a-${suffix}`);
+        const customerB = await registerAndSignin(`layout-b-${suffix}`);
+        userA = customerA.user.id;
+        userB = customerB.user.id;
+        const profileA = createProfile('a');
+        const profileAUpdated = {
+          ...createProfile('a-updated'),
+          columns: [{ key: 'name', visible: false, width: 320 }],
+        } satisfies ILayoutProfile;
+        const profileB = createProfile('b');
+
+        assert.equal(
+          await performAs(customerA.token, 'get', `${actionPath}/load`, {
+            query: { layoutKey },
+          }),
+          undefined,
+        );
+        assert.deepEqual(
+          await performAs(customerA.token, 'post', `${actionPath}/save`, {
+            body: { layoutKey, profile: profileA },
+          }),
+          profileA,
+        );
+        const persistedA = await app.scope('a-layoutprofile').model.layoutprofile.get({
+          userId: userA,
+          layoutKey,
+        });
+        assert.equal(String(persistedA?.userId), String(userA));
+        assert.deepEqual(persistedA?.profile, profileA);
+
+        assert.equal(
+          await performAs(customerB.token, 'get', `${actionPath}/load`, {
+            query: { layoutKey },
+          }),
+          undefined,
+        );
+        assert.deepEqual(
+          await performAs(customerB.token, 'post', `${actionPath}/save`, {
+            body: { layoutKey, profile: profileB },
+          }),
+          profileB,
+        );
+        assert.deepEqual(
+          await performAs(customerA.token, 'post', `${actionPath}/save`, {
+            body: { layoutKey, profile: profileAUpdated },
+          }),
+          profileAUpdated,
+        );
+        const profilesA = await app.scope('a-layoutprofile').model.layoutprofile.select({
+          where: { userId: userA, layoutKey },
+        });
+        assert.equal(profilesA.length, 1);
+        assert.deepEqual(profilesA[0].profile, profileAUpdated);
+
+        assert.deepEqual(
+          await performAs(customerB.token, 'get', `${actionPath}/load`, {
+            query: { layoutKey },
+          }),
+          profileB,
+        );
+        assert.equal(
+          await performAs(customerB.token, 'delete', `${actionPath}/reset`, {
+            query: { layoutKey },
+          }),
+          null,
+        );
+        assert.equal(
+          await performAs(customerB.token, 'get', `${actionPath}/load`, {
+            query: { layoutKey },
+          }),
+          undefined,
+        );
+        assert.deepEqual(
+          await performAs(customerA.token, 'get', `${actionPath}/load`, {
+            query: { layoutKey },
+          }),
+          profileAUpdated,
+        );
+      } finally {
+        const userIds = [userA, userB].filter((id): id is TableIdentity => id !== undefined);
+        await deleteOwnedTestData(userIds, layoutKey);
+      }
+    });
+  });
+
+  it('serializes competing first saves for one user and layout key', async () => {
+    const suffix = createTestId();
+    const layoutKey = `/layout-concurrency/${suffix}`;
+    const fixture = await app.bean.executor.mockCtx(async () => {
+      const customer = await registerAndSignin(`layout-concurrency-${suffix}`);
+      return { token: customer.token, userId: customer.user.id };
+    });
+    const profiles = [createProfile('concurrency-a'), createProfile('concurrency-b')];
+    try {
+      const results = await Promise.allSettled(
+        profiles.map(profile =>
+          app.bean.executor.mockCtx(async () => {
+            return await performAs(fixture.token, 'post', `${actionPath}/save`, {
+              body: { layoutKey, profile },
+            });
+          }),
+        ),
+      );
+      assert.equal(results.filter(result => result.status === 'fulfilled').length, profiles.length);
+
+      const persisted = await app.bean.executor.mockCtx(async () => {
+        return await app.scope('a-layoutprofile').model.layoutprofile.select({
+          where: { userId: fixture.userId, layoutKey },
+        });
+      });
+      assert.equal(persisted.length, 1);
+      assert.ok(
+        profiles.some(profile => JSON.stringify(profile) === JSON.stringify(persisted[0].profile)),
+      );
+
+      const loaded = await app.bean.executor.mockCtx(async () => {
+        return await performAs(fixture.token, 'get', `${actionPath}/load`, {
+          query: { layoutKey },
+        });
+      });
+      assert.deepEqual(loaded, persisted[0].profile);
+    } finally {
+      await app.bean.executor.mockCtx(async () => {
+        await deleteOwnedTestData([fixture.userId], layoutKey);
+      });
+    }
+  });
+
+  it('validates the layout key and profile structure at the API boundary', async () => {
+    await app.bean.executor.mockCtx(async () => {
+      const suffix = createTestId();
+      const customer = await registerAndSignin(`layout-validation-${suffix}`);
+      const layoutKey = `/layout-validation/${suffix}`;
+      try {
+        for (const body of [
+          { layoutKey: '', profile: createProfile('invalid-key') },
+          { layoutKey, profile: { ...createProfile('version'), version: 2 } },
+          {
+            layoutKey,
+            profile: {
+              ...createProfile('width'),
+              columns: [{ key: 'name', visible: true, width: 0 }],
+            },
+          },
+          {
+            layoutKey,
+            profile: {
+              ...createProfile('visible'),
+              columns: [{ key: 'name', visible: 'yes', width: 'auto' }],
+            },
+          },
+        ]) {
+          const [, error] = await catchError(() =>
+            performAs(customer.token, 'post', `${actionPath}/save`, { body }),
+          );
+          assert.equal(
+            error?.code,
+            422,
+            `unexpected validation result for ${JSON.stringify(body)}: ${JSON.stringify(error)}`,
+          );
+        }
+      } finally {
+        await deleteOwnedTestData([customer.user.id], layoutKey);
+      }
+    });
+  });
+});

package/vona/src/suite-vendor/a-cabloy/modules/a-layoutprofile/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "rootDir": "src",
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist"
+  },
+  "include": ["src", "src/.metadata/*.ts", "src/**/*.json"]
+}

package/vona/src/suite-vendor/a-cabloy/modules/a-layoutprofile/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["src", "src/.metadata/*.ts", "src/**/*.json", "test"]
+}

package/vona/src/suite-vendor/a-cabloy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-suite-a-cabloy",
-  "version": "5.1.52",
+  "version": "5.1.53",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "author": "",
@@ -8,6 +8,7 @@
   "type": "module",
   "dependencies": {
     "vona-module-a-cabloy": "workspace:^",
+    "vona-module-a-layoutprofile": "^5.0.1",
     "vona-module-a-markdown": "^5.0.3",
     "vona-module-a-rbac": "^5.0.6",
     "vona-module-a-socket": "workspace:^",

package/vona/src/suite-vendor/a-cabloy/tsconfig.json

@@ -28,6 +28,9 @@
     },
     {
       "path": "modules/a-rbac/tsconfig.build.json"
+    },
+    {
+      "path": "modules/a-layoutprofile/tsconfig.build.json"
     }
   ],
   "exclude": ["modules"]

package/zova/packages-zova/zova/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova",
-  "version": "5.1.160",
+  "version": "5.1.162",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A vue3 framework with ioc",
   "keywords": [
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "zova-core": "^5.1.89",
-    "zova-suite-a-zova": "^5.1.159"
+    "zova-suite-a-zova": "^5.1.161"
   },
   "devDependencies": {
     "clean-package": "^2.2.0",

package/zova/pnpm-lock.yaml

@@ -171,6 +171,9 @@ importers:
       zova-module-a-interceptor:
         specifier: workspace:^
         version: link:src/suite-vendor/a-zova/modules/a-interceptor
+      zova-module-a-layoutprofile:
+        specifier: workspace:^
+        version: link:src/suite-vendor/a-cabloy/modules/a-layoutprofile
       zova-module-a-logger:
         specifier: workspace:^
         version: link:src/suite-vendor/a-zova/modules/a-logger
@@ -870,7 +873,7 @@ importers:
         specifier: ^5.1.89
         version: link:../zova-core
       zova-suite-a-zova:
-        specifier: ^5.1.158
+        specifier: ^5.1.160
         version: link:../../src/suite-vendor/a-zova
     devDependencies:
       clean-package:
@@ -973,13 +976,25 @@ importers:
 
   src/suite-vendor/a-cabloy:
     dependencies:
+      zova-module-a-layoutprofile:
+        specifier: ^5.0.0
+        version: link:modules/a-layoutprofile
       zova-module-a-rbac:
         specifier: ^5.0.1
         version: link:modules/a-rbac
       zova-module-rest-resource:
-        specifier: ^5.1.52
+        specifier: ^5.1.54
         version: link:modules/rest-resource
 
+  src/suite-vendor/a-cabloy/modules/a-layoutprofile:
+    devDependencies:
+      clean-package:
+        specifier: ^2.2.0
+        version: 2.2.0
+      rimraf:
+        specifier: ^6.1.3
+        version: 6.1.3
+
   src/suite-vendor/a-cabloy/modules/a-rbac:
     devDependencies:
       clean-package:
@@ -1058,7 +1073,7 @@ importers:
         specifier: ^5.1.26
         version: link:modules/a-app
       zova-module-a-bean:
-        specifier: ^5.1.33
+        specifier: ^5.1.35
         version: link:modules/a-bean
       zova-module-a-behavior:
         specifier: ^5.1.26
@@ -1097,10 +1112,10 @@ importers:
         specifier: ^5.1.53
         version: link:modules/a-openapi
       zova-module-a-router:
-        specifier: ^5.1.35
+        specifier: ^5.1.37
         version: link:modules/a-router
       zova-module-a-routerstack:
-        specifier: ^5.1.27
+        specifier: ^5.1.29
         version: link:modules/a-routerstack
       zova-module-a-routertabs:
         specifier: ^5.1.34
@@ -1118,7 +1133,7 @@ importers:
         specifier: ^5.1.35
         version: link:modules/a-style
       zova-module-a-table:
-        specifier: ^5.1.40
+        specifier: ^5.1.42
         version: link:modules/a-table
       zova-module-a-zod:
         specifier: ^5.1.37

package/zova/src/suite/a-home/modules/home-base/src/service/ssrLayout.ts

@@ -37,17 +37,26 @@ export class ServiceSsrLayout extends BeanBase {
             `<script id="__leftDrawerOpenJS">
   ${this.options?.sidebarLeftOpenPCCapability ? this._getJsHandlerSidebar() : ''}
   ${this._getJsHandlerPageContainer()}
-  window.ssr_body_ready_handler=()=>{
-    ${this.options?.sidebarLeftOpenPCCapability ? 'window.ssr_body_ready_handler_sidebar();' : ''}
-    window.ssr_body_ready_handler_pageContainer();
+  window.ssr_body_ready_handler=__targets=>{
+    ${this.options?.sidebarLeftOpenPCCapability ? 'window.ssr_body_ready_handler_sidebar(__targets);' : ''}
+    window.ssr_body_ready_handler_pageContainer(__targets);
   };
   window.ssr_body_ready_condition=()=>{
+    const __domDrawerContainer=document.querySelector('#q-app>.drawer');
     const __domPageContainer=document.querySelector('#q-app>.drawer>.drawer-content');
-    return __domPageContainer;
+    ${this.options?.sidebarLeftOpenPCCapability ? "const __domDrawer=document.querySelector('#q-app>.drawer>.drawer-side');" : ''}
+    return __domDrawerContainer&&__domPageContainer${this.options?.sidebarLeftOpenPCCapability ? '&&__domDrawer' : ''}?{
+      drawerContainer:__domDrawerContainer,
+      pageContainer:__domPageContainer,
+      ${this.options?.sidebarLeftOpenPCCapability ? 'drawer:__domDrawer,' : ''}
+    }:undefined;
   };
-  window.ssr_body_ready_callback=()=>{
-    window.ssr_body_ready_handler();
-    document.querySelector('#__leftDrawerOpenJS').remove();
+  window.ssr_body_ready_callback=__targets=>{
+    try{
+      window.ssr_body_ready_handler(__targets);
+    }finally{
+      document.querySelector('#__leftDrawerOpenJS')?.remove();
+    }
   };
 </script>`.replaceAll('\n', '') + getBodyReadyObserverScript();
         }
@@ -61,7 +70,7 @@ export class ServiceSsrLayout extends BeanBase {
   }
 
   private _getJsHandlerSidebar() {
-    return `window.ssr_body_ready_handler_sidebar=()=>{
+    return `window.ssr_body_ready_handler_sidebar=__targets=>{
       const __belowBreakpoint=document.documentElement.clientWidth <= ${this.options?.sidebarBreakpoint};
       let __leftDrawerOpen;
       if(__belowBreakpoint){
@@ -70,10 +79,11 @@ export class ServiceSsrLayout extends BeanBase {
         const __leftDrawerOpenPC=window.ssr_load_local('sidebarLeftOpenPC');
         __leftDrawerOpen=__leftDrawerOpenPC!==undefined?__leftDrawerOpenPC:${this.options?.sidebarLeftOpenPCFallback ?? false};
       }
-      const __domDrawerContainer=document.querySelector('#q-app>.drawer');
-      const __domDrawer=document.querySelector('#q-app>.drawer>.drawer-side');
+      const __domDrawerContainer=__targets?.drawerContainer;
+      const __domDrawer=__targets?.drawer;
       const sidebarWidth = '${this.scope.config.layout.sidebar.width}px';
       const navbarHeight = '${this.scope.config.layout.navbar.height}px';
+      if(!__domDrawerContainer||!__domDrawer)return;
       if(__leftDrawerOpen){
         __domDrawer.style.transform='translateX(0px)';
         __domDrawer.style.width=sidebarWidth;

package/zova/src/suite/cabloy-basic/modules/basic-app/src/component/routedDialog/controller.tsx

@@ -41,8 +41,10 @@ export class ControllerRoutedDialog extends BeanControllerBase {
     if (!this.$$modelStack) return <div class="loading loading-spinner"></div>;
     const router = item.state.router;
     if (!router) return <div class="text-error">Router unavailable</div>;
+    const pageHostProviders = item.options.createPageHostProviders?.(item.state.context);
     const vnode = h(ZRouterViewStack, {
       pageHostProviders: {
+        ...pageHostProviders,
         [routedDialogContextKey]: item.state.context,
       },
     });

package/zova/src/suite/cabloy-basic/modules/basic-app/src/types/appModal.ts

@@ -94,6 +94,9 @@ export interface IModalRoutedDialogOptions<
   title?: string;
   props?: TProps;
   session?: TSession;
+  createPageHostProviders?: (
+    context: IRoutedDialogContext<any, any, any>,
+  ) => Record<string, unknown>;
   onClose?: () => void;
 }
 

package/zova/src/suite/cabloy-basic/modules/basic-page/src/component/blockPage/controller.tsx

@@ -1,6 +1,7 @@
 import type { RowSelectionState, SortingState } from '@tanstack/vue-table';
 import type { TableIdentity } from 'table-identity';
 import type { IComponentOptions } from 'zova';
+import type { ModelLayoutProfile } from 'zova-module-a-layoutprofile';
 import type {
   IJsxRenderContextPage,
   IPageScope,
@@ -19,7 +20,7 @@ import { BeanControllerBase, deepEqual } from 'zova';
 import { ZovaJsx } from 'zova-jsx';
 import { Controller } from 'zova-module-a-bean';
 import { $QueriesEnsureLoaded } from 'zova-module-a-model';
-import { BeanControllerTableBase } from 'zova-module-a-table';
+import { BeanControllerTableBase, ITableLayout } from 'zova-module-a-table';
 import { ModelResource } from 'zova-module-rest-resource';
 
 import {
@@ -62,6 +63,7 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
   tableRef: BeanControllerTableBase<TData> | undefined;
   private _tableMetaRefreshPending = false;
   private _tableMetaRefreshTask: Promise<void> | undefined;
+  $$modelLayoutProfile: ModelLayoutProfile | undefined;
 
   jsxZova: ZovaJsx;
   jsxCelScope: IPageScope;
@@ -91,6 +93,14 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
       true,
       this.resource,
     );
+    const layoutKey = this.layoutKey;
+    if (layoutKey) {
+      this.$$modelLayoutProfile = await this.bean._getBeanSelector(
+        'a-layoutprofile.model.layoutProfile',
+        true,
+        layoutKey,
+      );
+    }
     // jsx
     this._prepareJsx();
     // query
@@ -120,6 +130,7 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
     await $QueriesEnsureLoaded(
       () => this.$$modelResource.apiSchemasSelect.sdk,
       () => this.queryData,
+      () => this.queryLayoutProfile,
     );
     this._refreshSelectedRows((this.data ?? []) as unknown as Record<string, unknown>[]);
     this._notifySelectionChange();
@@ -144,6 +155,38 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
     return this.$props.resource;
   }
 
+  get queryLayoutProfile() {
+    return this.$$modelLayoutProfile?.load();
+  }
+
+  get tableLayout(): ITableLayout | undefined {
+    return this.queryLayoutProfile?.data as ITableLayout | undefined;
+  }
+
+  get layoutKey() {
+    return this.$pageRoute?.path;
+  }
+
+  get columnConfigSeed() {
+    const layout = this.tableRef?.layout;
+    const properties = this.tableRef?.layoutProperties;
+    if (!layout || !properties || !this.$$modelLayoutProfile || !this.$passport.isAuthenticated)
+      return;
+    return { layout, properties };
+  }
+
+  async saveColumnConfig(layout: ITableLayout): Promise<void> {
+    if (!this.$$modelLayoutProfile) return;
+    await this.$$modelLayoutProfile.save().mutateAsync(layout as any);
+    await this._requestTableMetaRefresh();
+  }
+
+  async resetColumnConfig(): Promise<void> {
+    if (!this.$$modelLayoutProfile) return;
+    await this.$$modelLayoutProfile.reset().mutateAsync();
+    await this._requestTableMetaRefresh();
+  }
+
   private _normalizeSelectedIds(ids: readonly TableIdentity[]) {
     const selectedIds: TableIdentity[] = [];
     const keys = new Set<string>();

package/zova/src/suite/cabloy-basic/modules/basic-page/src/component/blockTable/controller.tsx

@@ -50,6 +50,7 @@ export class ControllerBlockTable<TData extends {} = {}> extends BeanControllerB
           rowSelection={$$page.rowSelection}
           onRowSelectionChange={updater => $$page.onRowSelectionChange(updater)}
           tableScope={$$page.jsxCelScope}
+          layout={$$page.tableLayout}
         ></ZTable>
       </div>
     );

package/zova/src/suite/cabloy-basic/modules/basic-page/src/component/blockToolbarBulk/controller.tsx

@@ -9,7 +9,10 @@ import { VNode } from 'vue';
 import { BeanControllerBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 
-import { resolveTableActionBulkDynamicProps } from '../../lib/selection.js';
+import {
+  groupTableActionBulkActions,
+  resolveTableActionBulkDynamicProps,
+} from '../../lib/selection.js';
 
 declare module 'zova-module-a-openapi' {
   export interface IResourceBlockRecord {
@@ -65,35 +68,48 @@ export class ControllerBlockToolbarBulk extends BeanControllerBase {
     const { $$page } = this.$$renderContext;
     const domActions = this._renderActions();
     const selectionAvailable = $$page.selectionAvailable;
-    if ((!domActions || domActions.length === 0) && !selectionAvailable) return;
+    if (domActions.start.length === 0 && domActions.end.length === 0 && !selectionAvailable) return;
     return (
       <div class={this.$props.class}>
-        <div class="join" role="toolbar" aria-label={this.scope.locale.BulkActions()}>
-          {$$page.selectionToggleAvailable && (
-            <button type="button" class="btn join-item" onClick={() => $$page.toggleSelection()}>
-              {$$page.selectionVisible ? this.scope.locale.Done() : this.scope.locale.Select()}
-            </button>
+        <div
+          class="flex flex-wrap items-center gap-3"
+          role="toolbar"
+          aria-label={this.scope.locale.BulkActions()}
+        >
+          {(selectionAvailable || domActions.start.length > 0) && (
+            <div class="join">
+              {$$page.selectionToggleAvailable && (
+                <button
+                  type="button"
+                  class="btn join-item"
+                  onClick={() => $$page.toggleSelection()}
+                >
+                  {$$page.selectionVisible ? this.scope.locale.Done() : this.scope.locale.Select()}
+                </button>
+              )}
+              {$$page.selectionEnabled && (
+                <span
+                  class="join-item border-base-300 bg-base-200 px-3 py-2"
+                  role="status"
+                  aria-live="polite"
+                >
+                  {this.scope.locale.SelectedItems($$page.selection.count)}
+                </span>
+              )}
+              {domActions.start}
+            </div>
           )}
-          {$$page.selectionEnabled && (
-            <span
-              class="join-item border-base-300 bg-base-200 px-3 py-2"
-              role="status"
-              aria-live="polite"
-            >
-              {this.scope.locale.SelectedItems($$page.selection.count)}
-            </span>
-          )}
-          {domActions}
+          {domActions.end.length > 0 && <div class="ml-auto join">{domActions.end}</div>}
         </div>
       </div>
     );
   }
 
-  private _renderActions() {
+  private _renderActions(): Record<'start' | 'end', VNode[]> {
     const { $jsx, $celScope } = this.$$renderContext;
     const actions = this.$props.actions;
-    if (!actions || actions.length === 0) return;
-    const domActions: VNode[] = [];
+    if (!actions || actions.length === 0) return { start: [], end: [] };
+    const items: { item: VNode; placement?: unknown }[] = [];
     actions.forEach((action, index) => {
       const actionName = action.name;
       const permissionHint = action.options?.permission;
@@ -127,12 +143,11 @@ export class ControllerBlockToolbarBulk extends BeanControllerBase {
       });
       const domAction = $jsx.render(action.render!, options, $celScope, this.$$renderContext);
       if (!domAction) return;
-      if (Array.isArray(domAction)) {
-        domActions.push(...domAction);
-      } else {
-        domActions.push(domAction);
+      const renderedActions = Array.isArray(domAction) ? domAction : [domAction];
+      for (const item of renderedActions) {
+        items.push({ item, placement: action.options?.placement });
       }
     });
-    return domActions;
+    return groupTableActionBulkActions(items);
   }
 }