cabloy 5.1.157 → 5.1.159

package/repo-docs/fullstack/ssr-site-and-flavor-setup.md

@@ -0,0 +1,198 @@
+# Independent SSR Site and Flavor Setup
+
+Use this guide when adding a new deployable Zova SSR surface that Vona must dispatch and serve. It covers a new **site + flavor** pair, not merely a page or route inside an existing site.
+
+The durable outcome is one aligned identity tuple:
+
+```text
+Zova flavor
+  ↕
+flavor env/config + Zova SSR/REST scripts
+  ↕
+root paired build wrapper
+  ↕
+SSR release directory + generated REST package
+  ↕
+Vona @SsrSite registration
+```
+
+Do not substitute identifiers from an existing Admin, Web, or business site. Select and verify every member of the tuple together.
+
+## Before you start
+
+### Detect the active edition
+
+Read the repository marker first:
+
+- `__CABLOY_BASIC__` → use the current Basic scripts, flavors, UI baselines, site modules, and paths.
+- `__CABLOY_START__` → inspect the active Start repository before naming a flavor, wrapper, generated package, or site module.
+- both markers → stop: the checkout is ambiguous.
+
+The framework model is shared, but the exact flavor names, site baselines, UI layer, assets, scripts, and generated output paths can differ by edition. See [Edition Detection](/editions/detection) and [Edition Collaboration Differences](/fullstack/edition-collaboration-differences).
+
+### Confirm that a new site is needed
+
+| Change                                                                                      | Normal boundary                                                                                   |
+| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| New page or route inside an existing SSR site                                               | Page, route, model, and existing site verification; normally no new flavor or `@SsrSite`.         |
+| Frontend metadata/resource handoff to an existing backend consumer                          | Reverse contract loop; rebuild every affected existing flavor pair, then run `npm run deps:vona`. |
+| New deployable URL mount, SSR admission policy, assets, or independent frontend composition | New independent flavor and Vona SSR site; continue with this guide.                               |
+
+A new site is an ownership decision, not a convenient alias for an existing Admin or Web surface.
+
+## Define the identity tuple
+
+Choose these values before editing source. Keep their spelling and ownership consistent:
+
+| Identity               | Role                                                                                                            |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `<site-flavor>`        | Exact Zova flavor identifier used in env/config, lower-level scripts, build output, and generated REST package. |
+| `<site-id>`            | Vona SSR site identity and Zova `SITE_ID`; unique among enabled sites.                                          |
+| `<public-path>`        | External mount path; aligned between Zova `APP_PUBLIC_PATH` and Vona `publicPath`; unique among enabled sites.  |
+| `<site-module>`        | Vona module that owns the site bean and copied SSR assets.                                                      |
+| `<bundle-path>`        | Copied SSR release directory under `<site-module>/assets/site`; exactly matches Vona `bundlePath`.              |
+| `<zova-rest-package>`  | Flavor-specific generated REST/type package imported by the Vona site bean.                                     |
+| `<root-build-wrapper>` | Root command that produces the selected SSR bundle **and** REST/type package.                                   |
+
+Only one enabled SSR site may own the empty/root public path. A non-root site’s route aliases are relative to the router mount base; do not repeat `<public-path>` inside those aliases.
+
+## Configure Zova
+
+### 1. Add a tracked flavor environment
+
+Keep shared defaults in `zova/env/.env`; add the site’s tracked flavor override at:
+
+```text
+zova/env/.env.<site-flavor>
+```
+
+The override must select a non-empty `SITE_ID`, the matching `APP_PUBLIC_PATH`, an SSR rendering profile, and the build-copy targets. For a Vona-integrated SSR site, set `SSR_WITH_VONA=true`.
+
+Choose `SSR_PROFILE` from the rendering contract:
+
+- use a public profile for cookie-free, cache-safe first paint;
+- choose a session/private profile deliberately for cookie-backed admission, personalized first paint, or private SSR data.
+
+Point the build destinations to the selected Vona site module and generated package workspace:
+
+```text
+BUILD_COPY_RELEASE = ../vona/src/.../modules/<site-module>/assets/site
+BUILD_REST_COPY_DIST = ../vona/.zova-rest
+```
+
+Do not change ports or worktree-local environment overrides to make a new site work. Follow the normal worktree-environment workflow only when that separate setup is explicitly required.
+
+### 2. Add flavor-specific frontend configuration only where necessary
+
+Use `zova/src/front/config/config/config.<site-flavor>.ts` for site-specific route aliases, route exclusions, layouts, or app configuration. Keep shared API, locale, theme, SSR, and app assembly in base `config.ts`.
+
+For mounted routing:
+
+- configure an unnamed canonical route through `config.routes.path`;
+- configure a named dynamic route through `config.routes.name`;
+- generate a named alias with `$router.getAliasPath(...)` rather than assuming `$router.getPagePath(...)` selects an alias;
+- do not duplicate the external mount prefix in an alias because `APP_PUBLIC_PATH` supplies that boundary.
+
+Choose layouts, title, locales, assets, route exclusions, `requiresAuth`, and redirects from the new site’s contract. Existing Admin and Web sites are specimens, not defaults to copy blindly.
+
+### 3. Add durable scripts and root wrappers
+
+Inspect the active root `package.json` and `zova/package.json` first. Add lower-level Zova scripts in the durable source manifest, normally including:
+
+```text
+dev:ssr:<site-flavor>
+build:ssr:<site-flavor>
+build:rest:<site-flavor>
+preview:ssr:<site-flavor>
+```
+
+The SSR and REST scripts must pass the same flavor. Add a paired batch and an explicit root build wrapper that runs both outputs in order:
+
+```bash
+npm run build:ssr:<site-flavor>
+npm run build:rest:<site-flavor>
+```
+
+Use the root wrapper for normal site-level builds and in Vona diagnostics. Add the flavor to an aggregate build only when it belongs to that edition’s default shipped artifact set.
+
+Edit durable manifests such as root `package.json` and `zova/package.original.json`; do not hand-edit generated `zova/package.json`, generated REST output, copied bundles, or generated dependency state. Do not run `npm run init` merely to synchronize a manifest.
+
+## Register the Vona SSR site
+
+Create or refine an independently packaged Vona site module. It must expose its assets, source entry point, locale metadata, and an SSR-site bean.
+
+The site bean should:
+
+1. import `IPagePathRecord` and `IIconRecord` from `<zova-rest-package>`;
+2. augment the SSR site-ID and public-path type records;
+3. define typed page/page-data options around the generated route record;
+4. extend `BeanSsrSiteBase` and register `@SsrSite(...)`;
+5. provide a localized title, `<site-id>`, `<public-path>`, `<bundle-path>`, and `<root-build-wrapper>` diagnostics command.
+
+Conceptually:
+
+```ts
+@SsrSite({
+  siteId: '<site-id>',
+  publicPath: '<public-path>',
+  bundlePath: '<bundle-path>',
+  diagnostics: { buildCommand: 'npm run <root-build-wrapper>' },
+})
+export class SsrSiteExample extends BeanSsrSiteBase<...> {}
+```
+
+The default release identity is normally `ssr-<site-flavor>-<app-version>`. Unless you intentionally override it, use that exact copied directory as `<bundle-path>`. Vona resolves the bundle from the owning site module’s `assets/site/<bundle-path>` directory.
+
+Ensure the site module is discoverable through its durable suite/module manifest. Let normal tooling generate metadata and dependency closures; do not hand-edit generated metadata.
+
+## Build the artifact pair and sync Vona
+
+For every Vona-consumed independent SSR site, this sequence is required:
+
+```bash
+npm run <root-build-wrapper>
+npm run deps:vona
+```
+
+The wrapper must create both:
+
+```text
+SSR bundle and client assets
++ generated flavor REST/type package
+```
+
+`build:rest:<site-flavor>` alone is not a valid Vona SSR handoff: Vona needs the bundle, assets, and typed REST package to move together. Likewise, a default Admin or Web wrapper does not prove an independently named site was rebuilt.
+
+After generation, verify that:
+
+- the copied release directory matches `<bundle-path>`;
+- the generated package name and Vona import match `<zova-rest-package>`;
+- the Vona local workspace can discover the package after `npm run deps:vona`;
+- the site bean’s diagnostics command names the same root wrapper that produced the artifacts.
+
+If the generated artifacts are correct and `npm run deps:vona` completed but Vona still sees stale local types, diagnose [local dependency drift](/fullstack/contract-loop-playbook#recovery-path-for-local-dependency-drift) only then.
+
+## Verify through the Vona boundary
+
+A standalone Zova development server can help with page iteration, but it does not prove copied artifacts, Vona site matching, generated type handoff, or production-like hydration.
+
+Run the narrowest meaningful checks first:
+
+```bash
+npm run tsc:zova
+npm run <root-build-wrapper>
+npm run deps:vona
+pnpm --dir vona run tsc
+```
+
+Then prove the Vona-served site:
+
+1. request the exact public mount path and assert the intended Vona SSR site handled it;
+2. inspect raw HTML for server-rendered content and the correct cache/admission behavior;
+3. verify client assets load from the mounted site;
+4. open the same route in a browser and assert hydration completes without errors or SSR/client mismatch;
+5. verify canonical and alias route behavior, including no duplicated mount path;
+6. exercise the site’s public/private admission or redirect contract;
+7. retain focused browser/E2E evidence for the new site rather than relying only on compilation.
+
+For more detail, read [SSR Architecture Overview](/frontend/ssr-architecture-overview), [SSR Build and Deploy Guide](/frontend/ssr-build-deploy-guide), [Vona + Zova Integration](/fullstack/vona-zova-integration), and [Contract Loop Playbook](/fullstack/contract-loop-playbook).

package/repo-docs/fullstack/vona-zova-integration.md

@@ -64,6 +64,8 @@ Because Start can differ in UI layer, module composition, SSR site baselines, an
 2. the Start repo’s `package.json`
 3. the exact Zova flavor names and generated output paths used there
 
+For a new independently mounted SSR surface, use [Independent SSR Site and Flavor Setup](/fullstack/ssr-site-and-flavor-setup). It defines the linked Zova flavor, paired SSR/REST artifacts, Vona `@SsrSite` registration, and browser proof without assuming that either edition’s default Admin or Web wrapper applies.
+
 ## Recommended integration workflow
 
 ### 1. Detect the edition

package/repo-e2e/docs/playwright.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from '@playwright/test';
+
+const rootDir = new URL('../..', import.meta.url).pathname;
+const baseURL = 'http://127.0.0.1:4173';
+
+export default defineConfig({
+  testDir: `${rootDir}/repo-e2e/docs/specs`,
+  outputDir: `${rootDir}/repo-e2e/docs/test-results`,
+  fullyParallel: false,
+  workers: 1,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI
+    ? [
+        ['html', { open: 'never', outputFolder: `${rootDir}/repo-e2e/docs/playwright-report` }],
+        ['list'],
+      ]
+    : 'list',
+  use: {
+    baseURL,
+    viewport: { width: 1440, height: 900 },
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'pnpm --dir repo-docs docs:preview -- --host 127.0.0.1 --port 4173 --strictPort',
+    cwd: rootDir,
+    url: `${baseURL}/`,
+    timeout: 120_000,
+    reuseExistingServer: false,
+    stdout: 'pipe',
+    stderr: 'pipe',
+    gracefulShutdown: {
+      signal: 'SIGINT',
+      timeout: 10_000,
+    },
+  },
+});

package/repo-e2e/docs/specs/blogs-index.spec.ts

@@ -0,0 +1,180 @@
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '@playwright/test';
+
+interface IRectangle {
+  bottom: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  width: number;
+}
+
+interface IBlogsGeometry {
+  cards: IRectangle[];
+  grid: IRectangle & { display: string };
+}
+
+interface IArticleGeometry {
+  aside: IRectangle;
+  container: IRectangle;
+  content: IRectangle;
+  contentContainer: IRectangle;
+  body: IRectangle;
+}
+
+const blogArticlePaths = [
+  '/blogs/ai-react-nextjs-enterprise-architecture-cabloy/',
+  '/blogs/cabloy-fullstack-resource-addressing/',
+  '/blogs/nextjs-integrated-fullstack-cabloy-contract-loop/',
+  '/blogs/vue-object-oriented-zova-beginner-mental-model/',
+];
+
+function collectPageErrors(page: Page) {
+  const errors: Error[] = [];
+  page.on('pageerror', error => {
+    errors.push(error);
+  });
+  return errors;
+}
+
+function collectConsoleErrors(page: Page) {
+  const errors: string[] = [];
+  page.on('console', message => {
+    const text = message.text();
+    if (message.type() === 'error' || /hydration mismatch/i.test(text)) {
+      errors.push(text);
+    }
+  });
+  return errors;
+}
+
+function getDocumentHorizontalOverflow(page: Page) {
+  return page.evaluate(() => {
+    return (
+      Math.max(document.documentElement.scrollWidth, document.body.scrollWidth) - window.innerWidth
+    );
+  });
+}
+
+function getBlogsGeometry(page: Page) {
+  return page.locator('.cabloy-blog-grid').evaluate(grid => {
+    const toRectangle = (element: Element) => {
+      const { bottom, height, left, right, top, width } = element.getBoundingClientRect();
+      return { bottom, height, left, right, top, width };
+    };
+    const cards = Array.from(grid.querySelectorAll('.cabloy-blog-card'), toRectangle);
+    return {
+      grid: {
+        ...toRectangle(grid),
+        display: getComputedStyle(grid).display,
+      },
+      cards,
+    };
+  }) as Promise<IBlogsGeometry>;
+}
+
+function getArticleGeometry(page: Page) {
+  return page.locator('.VPDoc').evaluate(doc => {
+    const getRequiredChild = (parent: Element, selector: string) => {
+      const element = parent.querySelector(`:scope > ${selector}`);
+      if (!element) throw new Error(`Could not find ${selector}`);
+      return element;
+    };
+    const toRectangle = (element: Element) => {
+      const { bottom, height, left, right, top, width } = element.getBoundingClientRect();
+      return { bottom, height, left, right, top, width };
+    };
+    const container = getRequiredChild(doc, '.container');
+    const aside = getRequiredChild(container, '.aside');
+    const content = getRequiredChild(container, '.content');
+    const contentContainer = getRequiredChild(content, '.content-container');
+    const body = getRequiredChild(contentContainer, '.main').querySelector('.vp-doc');
+    if (!body) throw new Error('Could not find .vp-doc');
+    return {
+      aside: toRectangle(aside),
+      container: toRectangle(container),
+      content: toRectangle(content),
+      contentContainer: toRectangle(contentContainer),
+      body: toRectangle(body),
+    };
+  }) as Promise<IArticleGeometry>;
+}
+
+test(
+  'DOCS-BLOGS-01: Blogs index uses a wide desktop card grid',
+  { tag: '@layout' },
+  async ({ page }) => {
+    const pageErrors = collectPageErrors(page);
+    const consoleErrors = collectConsoleErrors(page);
+
+    const documentResponse = await page.goto('/blogs/', { waitUntil: 'load' });
+    expect(documentResponse?.ok()).toBeTruthy();
+
+    await expect(page.locator('.Layout.cabloy-blogs-index')).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Blogs', level: 1 })).toBeVisible();
+    await expect(page.locator('.VPDoc.has-sidebar')).toHaveCount(0);
+    await expect(page.locator('.VPDoc.has-aside')).toHaveCount(0);
+
+    const cards = page.locator('.cabloy-blog-card');
+    await expect(cards).toHaveCount(4);
+    for (let index = 0; index < 4; index++) {
+      await expect(cards.nth(index)).toBeVisible();
+      await expect(cards.nth(index).locator('.cabloy-blog-card__cover img')).toBeVisible();
+    }
+
+    const geometry = await getBlogsGeometry(page);
+    expect(geometry.grid.display).toBe('grid');
+    expect(geometry.cards).toHaveLength(4);
+
+    const [firstCard, ...remainingCards] = geometry.cards;
+    expect(firstCard.width).toBeGreaterThanOrEqual(279);
+    for (const card of remainingCards) {
+      expect(Math.abs(card.top - firstCard.top)).toBeLessThanOrEqual(1);
+      expect(Math.abs(card.width - firstCard.width)).toBeLessThanOrEqual(1);
+      expect(card.left).toBeGreaterThan(firstCard.left);
+      expect(card.left).toBeGreaterThanOrEqual(geometry.grid.left - 1);
+      expect(card.right).toBeLessThanOrEqual(geometry.grid.right + 1);
+      expect(card.right).toBeLessThanOrEqual(1441);
+    }
+    expect(firstCard.left).toBeGreaterThanOrEqual(geometry.grid.left - 1);
+    expect(firstCard.right).toBeLessThanOrEqual(geometry.grid.right + 1);
+    expect(firstCard.right).toBeLessThanOrEqual(1441);
+
+    await expect.poll(() => getDocumentHorizontalOverflow(page)).toBeLessThanOrEqual(1);
+    expect(pageErrors).toEqual([]);
+    expect(consoleErrors).toEqual([]);
+  },
+);
+
+test(
+  'DOCS-BLOGS-02: Blog articles use a wide desktop body with an outline aside',
+  { tag: '@layout' },
+  async ({ page }) => {
+    const pageErrors = collectPageErrors(page);
+    const consoleErrors = collectConsoleErrors(page);
+
+    for (const path of blogArticlePaths) {
+      const documentResponse = await page.goto(path, { waitUntil: 'load' });
+      expect(documentResponse?.ok()).toBeTruthy();
+
+      await expect(page.locator('.Layout.cabloy-blogs-article')).toBeVisible();
+      await expect(page.locator('.VPDoc.has-sidebar')).toHaveCount(0);
+      await expect(page.locator('.VPDoc.has-aside')).toHaveCount(1);
+      await expect(page.locator('.aside')).toBeVisible();
+
+      const geometry = await getArticleGeometry(page);
+      expect(geometry.container.width).toBeCloseTo(1216, 0);
+      expect(geometry.content.width).toBeCloseTo(960, 0);
+      expect(geometry.contentContainer.width).toBeCloseTo(896, 0);
+      expect(geometry.body.width).toBeCloseTo(896, 0);
+      expect(geometry.aside.left).toBeGreaterThanOrEqual(geometry.content.right - 1);
+      expect(geometry.aside.right).toBeLessThanOrEqual(geometry.container.right + 1);
+      await expect.poll(() => getDocumentHorizontalOverflow(page)).toBeLessThanOrEqual(1);
+    }
+
+    expect(pageErrors).toEqual([]);
+    expect(consoleErrors).toEqual([]);
+  },
+);

package/repo-e2e/docs/specs/github-repositories-nav.spec.ts

@@ -0,0 +1,69 @@
+import { expect, test } from '@playwright/test';
+
+const repositories = [
+  {
+    text: 'github.com/cabloy/cabloy',
+    link: 'https://github.com/cabloy/cabloy',
+  },
+  {
+    text: 'github.com/cabloy/cabloy-start',
+    link: 'https://github.com/cabloy/cabloy-start',
+  },
+];
+
+test('DOCS-NAV-01: GitHub icon menu exposes both repository links on desktop', async ({ page }) => {
+  const response = await page.goto('/', { waitUntil: 'load' });
+  expect(response?.ok()).toBeTruthy();
+
+  const trigger = page.getByRole('button', { name: 'GitHub repositories' });
+  await expect(trigger).toBeVisible();
+  await expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  await expect(trigger).not.toHaveText(/GitHub/);
+
+  await trigger.focus();
+  await page.keyboard.press('ArrowDown');
+  await expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+  const menu = page.getByRole('menu', { name: 'GitHub repositories' });
+  await expect(menu).toBeVisible();
+  for (const repository of repositories) {
+    const link = menu.getByRole('menuitem', { name: repository.text, exact: true });
+    await expect(link).toHaveAttribute('href', repository.link);
+    await expect(link).toHaveAttribute('target', '_blank');
+    await expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  }
+
+  await expect(
+    menu.getByRole('menuitem', { name: repositories[0].text, exact: true }),
+  ).toBeFocused();
+  await page.keyboard.press('ArrowDown');
+  await expect(
+    menu.getByRole('menuitem', { name: repositories[1].text, exact: true }),
+  ).toBeFocused();
+  await page.keyboard.press('Escape');
+  await expect(menu).toHaveCount(0);
+  await expect(trigger).toBeFocused();
+
+  await trigger.click();
+  await expect(menu).toBeVisible();
+  await page.mouse.click(10, 200);
+  await expect(menu).toHaveCount(0);
+});
+
+test('DOCS-NAV-02: GitHub repositories remain readable in mobile navigation', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  const response = await page.goto('/', { waitUntil: 'load' });
+  expect(response?.ok()).toBeTruthy();
+
+  await page.locator('.VPNavBarHamburger').click();
+
+  const screenMenu = page.locator('.VPNavScreen .cabloy-github-repositories--screen');
+  await expect(screenMenu).toBeVisible();
+  await expect(screenMenu.getByText('GitHub repositories')).toBeVisible();
+  for (const repository of repositories) {
+    const link = screenMenu.getByRole('link', { name: repository.text, exact: true });
+    await expect(link).toHaveAttribute('href', repository.link);
+    await expect(link).toHaveAttribute('target', '_blank');
+    await expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  }
+});

package/repo-e2e/docs/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

package/repo-e2e/specs/cabloy-basic.spec.ts

@@ -44,12 +44,12 @@ async function loginAsAdmin(page: Page) {
   return dashboardResponse;
 }
 
-function waitForStudentSelect(page: Page) {
+function waitForStudentSelect(page: Page, requireSuccess = true) {
   return page.waitForResponse(response => {
     const url = new URL(response.url());
     return (
       response.request().method() === 'GET' &&
-      response.ok() &&
+      (!requireSuccess || response.ok()) &&
       url.pathname === '/api/training/student' &&
       !response.request().headers()['x-vona-openapi-schema']
     );
@@ -382,6 +382,140 @@ test(
   },
 );
 
+test(
+  'ATP-BASIC-TABLE-01: Training Student table submits server sorting and pins configured columns',
+  { tag: ['@admin', '@flow'] },
+  async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    const pageErrors = collectPageErrors(page);
+    await loginAsAdmin(page);
+
+    const studentName = `Table E2E ${Date.now()}`;
+    const accessToken = (await page.context().cookies()).find(
+      cookie => cookie.name === 'token',
+    )?.value;
+    expect(accessToken).toBeTruthy();
+    const headers = { Authorization: `Bearer ${accessToken}` };
+    let studentId: string | number | undefined;
+    try {
+      const createResponse = await page.request.post('/api/training/student', {
+        data: { name: studentName, mobile: '13812345678', level: 1 },
+        headers,
+      });
+      expect(createResponse.ok()).toBeTruthy();
+      studentId = (await createResponse.json()).data;
+      expect(['string', 'number']).toContain(typeof studentId);
+
+      const initialSelect = waitForStudentSelect(page);
+      await page.getByRole('link', { name: 'Student', exact: true }).click();
+      await expect(page).toHaveURL(studentResourceUrl);
+      await initialSelect;
+      await page.setViewportSize({ width: 800, height: 900 });
+
+      const nameSort = page.getByRole('button', { name: 'Sort by name', exact: true });
+      const nameHeader = nameSort.locator('xpath=ancestor::th');
+      const operationsHeader = page.getByRole('columnheader', { name: 'Operations', exact: true });
+      await expect(nameSort).toBeVisible();
+      await expect(nameHeader).toHaveAttribute('aria-sort', 'none');
+      await expect(nameHeader).toHaveCSS('position', 'sticky');
+      await expect(nameHeader).toHaveCSS('left', '0px');
+      await expect(nameHeader).toHaveCSS('min-width', '240px');
+      await expect(nameHeader).toHaveCSS('text-align', 'left');
+      await expect(operationsHeader).toHaveCSS('position', 'sticky');
+      await expect(operationsHeader).toHaveCSS('right', '0px');
+      await expect(operationsHeader).toHaveCSS('min-width', '360px');
+      await expect(operationsHeader).toHaveCSS('text-align', 'center');
+
+      const ascendingResponse = waitForStudentSelect(page, false);
+      await nameSort.click();
+      await expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+      const ascending = await ascendingResponse;
+      expect(ascending.status()).toBe(200);
+      const ascendingUrl = new URL(ascending.url());
+      expect(JSON.parse(ascendingUrl.searchParams.get('orders')!)).toEqual([['name', 'asc']]);
+
+      const descendingResponse = waitForStudentSelect(page, false);
+      await nameSort.click();
+      await expect(nameHeader).toHaveAttribute('aria-sort', 'descending');
+      const descending = await descendingResponse;
+      expect(descending.status()).toBe(200);
+      const descendingUrl = new URL(descending.url());
+      expect(JSON.parse(descendingUrl.searchParams.get('orders')!)).toEqual([['name', 'desc']]);
+
+      const tableWrapper = page
+        .locator('div.overflow-x-auto')
+        .filter({ has: page.locator('table') })
+        .first();
+      await expect(tableWrapper).toBeVisible();
+      const overflow = await tableWrapper.evaluate(element => {
+        return element.scrollWidth > element.clientWidth;
+      });
+      expect(overflow).toBeTruthy();
+      await tableWrapper.evaluate(element => {
+        element.scrollLeft = element.scrollWidth;
+      });
+      await expect(operationsHeader).toHaveCSS('right', '0px');
+
+      const operationsRow = page
+        .locator('tbody tr')
+        .filter({
+          has: page.getByRole('button', { name: 'Summary', exact: true }),
+        })
+        .first();
+      const operationActions = operationsRow.getByRole('button');
+      await expect(operationActions).toHaveCount(4);
+      for (const action of await operationActions.all()) {
+        await expect(action).toBeVisible();
+      }
+      const operationsGeometry = await operationActions.evaluateAll(actions => {
+        const cell = actions[0]?.closest('td');
+        const join = actions[0]?.parentElement;
+        const wrapper = cell?.closest('table')?.parentElement;
+        if (!cell || !join || !wrapper)
+          throw new Error('Could not resolve the Operations action cell');
+        const cellRect = cell.getBoundingClientRect();
+        const joinRect = join.getBoundingClientRect();
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const tolerance = 2;
+        return {
+          fitsCell: join.scrollWidth <= cell.clientWidth,
+          actionsFitCell: actions.every(action => {
+            const rect = action.getBoundingClientRect();
+            return (
+              rect.left >= cellRect.left - tolerance && rect.right <= cellRect.right + tolerance
+            );
+          }),
+          joinFitsCell:
+            joinRect.left >= cellRect.left - tolerance &&
+            joinRect.right <= cellRect.right + tolerance,
+          actionsFitWrapper: actions.every(action => {
+            const rect = action.getBoundingClientRect();
+            return (
+              rect.left >= wrapperRect.left - tolerance &&
+              rect.right <= wrapperRect.right + tolerance
+            );
+          }),
+        };
+      });
+      expect(operationsGeometry).toEqual({
+        fitsCell: true,
+        actionsFitCell: true,
+        joinFitsCell: true,
+        actionsFitWrapper: true,
+      });
+      expect(pageErrors).toEqual([]);
+    } finally {
+      if (studentId !== undefined) {
+        const deleteResponse = await page.request.delete(
+          `/api/training/student/deleteForce/${studentId}`,
+          { headers },
+        );
+        expect(deleteResponse.ok()).toBeTruthy();
+      }
+    }
+  },
+);
+
 test(
   'ATP-BASIC-FORM-01: Training Student content remains in the Basic Information tab',
   { tag: ['@admin', '@flow'] },

package/vona/packages-cli/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-cli",
-  "version": "1.1.143",
+  "version": "1.1.144",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "vona cli",
   "keywords": [

package/vona/packages-cli/cli-set-api/cli/templates/tools/crudBasic/boilerplate/src/entity/{{resourceName}}.tsx_

@@ -11,7 +11,7 @@ export interface IEntityOptions<%=argv.resourceNameCapitalize%> extends IDecorat
 @Entity<IEntityOptions<%=argv.resourceNameCapitalize%>>('<%=argv.moduleResourceName%>', {
   openapi: { title: $locale('<%=argv.resourceNameCapitalize%>') },
   fields: {
-    id: $makeMetadata(ZovaRender.order(1, 'core')),
+    id: $makeMetadata(ZovaRender.order(1, 'core'), ZovaRender.column({ width: 50, fixed: 'left' })),
     iid: $makeMetadata(ZovaRender.visible(false)),
     deleted: $makeMetadata(ZovaRender.visible(false)),
     createdAt: $makeMetadata(