@nocobase/app-template-default 1.0.0-beta.75 → 1.0.0-beta.77

package/.agents/rules/build-and-deploy.md

@@ -2,6 +2,10 @@
 
 Read this before changing the build, packing a deployment archive, building or editing the Docker image, setting `CDN_BASE_URL`, or building for another platform. The deployment process itself is in the [deployment Skill](../skills/nocobase-deployment/SKILL.md), and dependency placement and the build failure table are in [where to declare a dependency](../skills/nocobase-app-development/references/dependencies.md).
 
+## Client typechecking
+
+Keep `types: ["node"]` in the client `tsconfig.json`. Shared contracts from database and lifecycle packages resolve to their TypeScript sources in a workspace and require Node.js declarations during typechecking. Declare that requirement explicitly instead of relying on unrelated plugin imports to load the declarations; type-only imports still disappear from the browser bundle.
+
 ## CDN assets at build time
 
 `CDN_BASE_URL` sets Vite's `base` only during a production build: `CDN_BASE_URL=https://cdn.example.com/my-app/v1/ pnpm build`. Use a full HTTPS URL ending in `/`; unset, empty or whitespace-only values keep the default `./`. `pnpm build` reads it from the process environment, then `.env.local`, then `.env`; development ignores it and continues using `APP_BASE_PATH`. It is a build parameter, absent from `config variables` and `dist/variables.json`, with no `config.yml` setting. Changing it requires rebuilding.

package/.agents/rules/components.md

@@ -35,4 +35,6 @@ The default brand palette and density live in `client/theme/themes/*.css`; share
 
 ## Standard process management
 
-The template includes `FlowDiagram`, `LifecycleDiagram` and `client/extensions/nocobase-workflow-management/` source. Reuse them when business workflows are introduced; preinstallation does not register a settings route or sample process. `LifecycleDiagram.configuration` automatically offers configuration for authorized native parameter bindings, using the application’s real parameter editor and API. Read [Lifecycle UI](../skills/nocobase-app-development/references/lifecycle-ui.md) before wiring the workflow directory, definition and execution pages. Preserve the standard visuals unless the user explicitly asks to customize them. UI Library names are shadcn registry items, not npm package names; an npm 404 is not evidence that a component is unavailable.
+The template includes `FlowDiagram`, `LifecycleDiagram` and `client/extensions/nocobase-workflow-management/` source. Reuse them when business workflows are introduced; preinstallation does not register a settings route or sample process. `LifecycleDiagram.configuration` automatically offers configuration for authorized native parameter bindings, using the application’s real parameter editor and API. Read [Lifecycle UI](../skills/nocobase-app-development/references/lifecycle-ui.md) before wiring the workflow directory, definition and execution pages. The existing `LifecycleDiagram` supports `presentation="process"` for compact approval/work cards and start/outcome pills, with `stateKind` supplied by the application; omitting it keeps the classic presentation. Preserve configuration and recorded-history behavior when selecting a presentation. UI Library names are shadcn registry items, not npm package names; an npm 404 is not evidence that a component is unavailable.
+
+Use `RecordLink` from `#components/record-link` for clickable record names and identifiers in lists and tables. It uses foreground text with medium weight, an underline on hover, and an underline plus focus outline for keyboard navigation. Preserve the native link semantics and route query context. Do not give record fields a permanent underline, primary-blue text, or a button-shaped surface. Keep action buttons and menu items on their own components; do not globally restyle every link in the application.

package/README.MD

@@ -403,9 +403,9 @@ Tests live in `tests/`, never beside the source they cover. Put logic and integr
 
 Application tests use the `/server`, `/client` and `/cli` entries of `@nocobase/app-testing`. Start page tests from `tests/components/page-harness.test.tsx`: it uses `renderWithApp()` with real application hooks, strict translations, permission checks and a test toaster. Answer requests through `answerApi()` and replace external services through `services`, without also registering their owning plugins. The template's Vitest configuration includes client plugins in custom package scopes so their contexts and service tokens remain shared. See `.agents/skills/nocobase-app-development/references/testing.md` for fixture ownership and complete server, migration and CLI examples.
 
-### Notification testing
+### Notification verification
 
-With the `notification:test` `send` permission, send a real message through the durable Notification Manager with `POST <APP_BASE_PATH>/api/notifications/testSends`. `GET <APP_BASE_PATH>/api/notifications/testTargets` lists each configured channel and the fields its test takes: Email tests require an address and IM tests use the configured logical target. The server enforces the permission when the message is submitted.
+Exercise the application's business notification flow, or use a server-side command resolving `notificationServiceToken` and calling `send()` with complete messages and explicit recipients. Inspect the returned notification ID through the protected `/api/notifications/logs` API or the logs page installed by the application. Log access requires `page:notification.logs` `access`.
 
 ## API documentation
 

package/client/components/data-table/data-table.tsx

@@ -107,6 +107,8 @@ export function DataTable<TData, TValue = unknown>({
     data: tableData,
     columns,
     manualPagination,
+    // Controlled hosts own URL page resets and correction after writes.
+    autoResetPageIndex: paginationState === undefined,
     rowCount,
     manualSorting,
     ...(onPaginationChange ? { onPaginationChange } : {}),

package/client/components/data-table/pagination.tsx

@@ -69,9 +69,9 @@ export function DataTablePagination<TData>({
             })
           : null}
       </div>
-      <div className='flex flex-wrap items-center gap-6 lg:gap-8'>
-        <div className='flex items-center gap-2'>
-          <p className='text-sm font-medium'>
+      <div className='flex min-w-0 flex-wrap items-center justify-end gap-x-6 gap-y-3 lg:gap-x-8'>
+        <div className='flex shrink-0 items-center gap-2'>
+          <p className='text-sm font-medium whitespace-nowrap'>
             {t('dataTable.rowsPerPage', { defaultValue: 'Rows per page' })}
           </p>
           <Select
@@ -83,7 +83,7 @@ export function DataTablePagination<TData>({
           >
             <SelectTrigger
               size='sm'
-              className='w-[70px]'
+              className='w-[70px] shrink-0'
               aria-label={t('dataTable.rowsPerPage', {
                 defaultValue: 'Rows per page',
               })}
@@ -102,14 +102,14 @@ export function DataTablePagination<TData>({
             </SelectContent>
           </Select>
         </div>
-        <div className='flex w-[100px] items-center justify-center text-sm font-medium'>
+        <div className='shrink-0 text-sm font-medium whitespace-nowrap tabular-nums'>
           {t('dataTable.pageOf', {
             defaultValue: 'Page {{page}} of {{pageCount}}',
             page: pageIndex + 1,
             pageCount,
           })}
         </div>
-        <div className='flex items-center gap-2'>
+        <div className='flex shrink-0 items-center gap-2'>
           <Button
             variant='outline'
             size='icon-sm'

package/client/components/default-access-editor.tsx

@@ -17,6 +17,8 @@ export interface DefaultAccessChoice {
 export interface DefaultAccessScopeControl {
   readonly id: string;
   readonly action: string;
+  /** Stable operation identity; titles alone may be shared by different actions. */
+  readonly actionId?: string;
   readonly scope: string;
   readonly value: string;
   readonly options: readonly DefaultAccessChoice[];
@@ -37,6 +39,8 @@ export interface DefaultAccessEditorProps {
     readonly resource: string;
     readonly chooseResource: string;
     readonly action: string;
+    /** Stable operation identity; titles alone may be shared by different actions. */
+    readonly actionId?: string;
     readonly scope: string;
     readonly noScopes: string;
   };
@@ -61,6 +65,16 @@ export function DefaultAccessEditor({
   onScopeChange,
 }: DefaultAccessEditorProps): ReactElement {
   const id = useId();
+  const groups = new Map<
+    string,
+    { action: string; scopes: DefaultAccessScopeControl[] }
+  >();
+  for (const scope of scopes) {
+    const key = scope.actionId ?? scope.action;
+    const group = groups.get(key);
+    if (group) group.scopes.push(scope);
+    else groups.set(key, { action: scope.action, scopes: [scope] });
+  }
   return (
     <div className='flex min-w-0 flex-col gap-6'>
       <div className='grid gap-4 sm:grid-cols-2'>
@@ -119,63 +133,76 @@ export function DefaultAccessEditor({
           )}
         </div>
       </div>
-      <div className='overflow-hidden rounded-lg border'>
+      <div className='grid min-w-0 gap-3'>
         {scopes.length ? (
-          scopes.map((scope) => (
-            <div
-              key={scope.id}
-              className='grid min-w-0 gap-3 border-b p-4 last:border-b-0 sm:grid-cols-3'
+          [...groups].map(([key, group]) => (
+            <section
+              key={key}
+              aria-labelledby={`${id}-action-${encodeURIComponent(key)}`}
+              className='grid min-w-0 gap-3 rounded-lg border bg-card p-3 sm:p-4'
             >
-              <div className='min-w-0 break-words text-sm font-medium'>
-                {scope.action}
-              </div>
-              <div className='flex min-w-0 flex-col gap-2 sm:col-span-2'>
-                <Label htmlFor={`${id}-${scope.id}`}>
-                  {scope.scope || labels.scope}
-                </Label>
-                <Select
-                  value={scope.value}
-                  items={scope.options}
-                  disabled={readOnly}
-                  onValueChange={(value) => {
-                    if (value !== null) onScopeChange(scope.id, value);
-                  }}
-                >
-                  <SelectTrigger
-                    id={`${id}-${scope.id}`}
-                    className='w-full'
-                    aria-label={`${scope.action} · ${scope.scope || labels.scope}`}
-                    aria-invalid={Boolean(scope.error)}
-                    aria-describedby={
-                      scope.error ? `${id}-${scope.id}-error` : undefined
-                    }
-                  >
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className='w-auto max-w-[min(var(--container-sm),var(--available-width))] min-w-(--anchor-width) [&_[data-slot=select-item]>:first-child]:whitespace-normal'>
-                    <SelectGroup>
-                      {scope.options.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                {scope.error && (
-                  <p
-                    id={`${id}-${scope.id}-error`}
-                    className='text-sm text-destructive'
-                  >
-                    {scope.error}
-                  </p>
-                )}
-                {scope.configuration}
+              <h3
+                id={`${id}-action-${encodeURIComponent(key)}`}
+                className='text-sm font-medium break-words'
+              >
+                {group.action}
+              </h3>
+              <div className='grid min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,16rem),1fr))] items-start gap-3'>
+                {group.scopes.map((scope) => (
+                  <div key={scope.id} className='grid min-w-0 gap-2'>
+                    <Label
+                      htmlFor={`${id}-${scope.id}`}
+                      className='text-xs text-muted-foreground'
+                    >
+                      {scope.scope || labels.scope}
+                    </Label>
+                    <Select
+                      value={scope.value}
+                      items={scope.options}
+                      disabled={readOnly}
+                      onValueChange={(value) => {
+                        if (value !== null) onScopeChange(scope.id, value);
+                      }}
+                    >
+                      <SelectTrigger
+                        id={`${id}-${scope.id}`}
+                        className='w-full'
+                        aria-label={`${scope.action} · ${scope.scope || labels.scope}`}
+                        aria-invalid={Boolean(scope.error)}
+                        aria-describedby={
+                          scope.error ? `${id}-${scope.id}-error` : undefined
+                        }
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent className='w-auto max-w-[min(var(--container-sm),var(--available-width))] min-w-(--anchor-width) [&_[data-slot=select-item]>:first-child]:whitespace-normal'>
+                        <SelectGroup>
+                          {scope.options.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                    {scope.error && (
+                      <p
+                        id={`${id}-${scope.id}-error`}
+                        className='text-sm text-destructive'
+                      >
+                        {scope.error}
+                      </p>
+                    )}
+                    {scope.configuration}
+                  </div>
+                ))}
               </div>
-            </div>
+            </section>
           ))
         ) : (
-          <p className='p-4 text-sm text-muted-foreground'>{labels.noScopes}</p>
+          <p className='rounded-lg border p-4 text-sm text-muted-foreground'>
+            {labels.noScopes}
+          </p>
         )}
       </div>
     </div>