@nocobase/app-template-default 1.0.0-beta.67 → 1.0.0-beta.69

package/client/styles.css

@@ -50,6 +50,7 @@
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+  --color-hover: var(--hover);
   --color-destructive: var(--destructive);
   --color-border: var(--border);
   --color-input: var(--input);
@@ -138,16 +139,28 @@
 
 /* Application-wide interaction and badge treatment, outside generated primitives. */
 @layer base {
+  /* Whatever may be clicked shows the pointer, the plugins' pages included.
+     Tailwind 4 leaves buttons with the arrow; a control disabled (natively,
+     or as Base UI and ARIA mark it) keeps it, and a utility on an element
+     (`cursor-default`, `cursor-not-allowed`) still wins over this layer. */
   :is(
       button,
       [role='button'],
       [role='menuitem'],
+      [role='menuitemcheckbox'],
+      [role='menuitemradio'],
       [role='option'],
       [role='tab'],
       [role='checkbox'],
       [role='radio'],
       [role='switch'],
       [role='combobox'],
+      summary,
+      select,
+      label[for],
+      input[type='checkbox'],
+      input[type='radio'],
+      input[type='file'],
       a[href]
     ):not(:disabled):not([aria-disabled='true']):not([data-disabled]) {
     cursor: pointer;
@@ -161,14 +174,64 @@
   padding-inline: calc(var(--spacing) * 2.5);
   line-height: 1.4;
 }
+/* The small badge, `data-size='sm'`: beside a title or a name, on a card or
+   a board's card, wherever several sit in a dense row. The default one is a
+   status standing on its own, as in a table's column or a record's
+   particulars. */
+[data-slot='badge'][data-size='sm'] {
+  min-height: calc(var(--spacing) * 5.5);
+  padding-block: 0;
+  padding-inline: calc(var(--spacing) * 1.5);
+  font-size: var(--text-xs);
+  line-height: 1.3;
+}
+
+/* One focus for every control, across the application and the plugins'
+   pages: a half-strength border and a 2px halo at a fifth of the ring colour,
+   in place of the 3px ring at half of it that the primitives and pages draw,
+   which reads heavy. Unlayered, so it wins over their utilities without
+   editing them. A label wrapping a visually hidden control, such as an
+   option card, and a rich text editor's frame show their control's focus.
+   An invalid field keeps its red, and a destructive button its own colour. */
+:is(
+    [data-slot='input'],
+    [data-slot='textarea'],
+    [data-slot='select-trigger'],
+    button,
+    [role='button'],
+    [role='tab'],
+    [role='menuitem'],
+    [role='checkbox'],
+    [role='switch'],
+    [role='radio'],
+    input[type='checkbox'],
+    input[type='radio'],
+    a[href]
+  ):focus-visible:not([aria-invalid='true']),
+label:has(> .sr-only:focus-visible),
+[data-slot='rich-text-editor']:focus-within,
+[data-slot='input-group']:has(
+    [data-slot='input-group-control']:focus-visible
+  ):not(:has([aria-invalid='true'])) {
+  border-color: color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 20%, transparent);
+}
+[data-slot='button'].text-destructive:focus-visible:not([aria-invalid='true']) {
+  border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in oklch, var(--destructive) 20%, transparent);
+}
 
-/* Shared overlay treatment lives outside generated shadcn primitives. */
+/* Overlays in a light frame: a faint, blurred backdrop, and the content
+   framed by the general border alone, as a card is, without the primitive's
+   ring or a heavy shadow. The plugins' copies of these primitives take it
+   too; unlayered, so it wins over their utilities. */
 :is(
   [data-slot='dialog-overlay'],
   [data-slot='alert-dialog-overlay'],
   [data-slot='sheet-overlay']
 ) {
-  background: var(--overlay-backdrop);
+  background: rgb(0 0 0 / 0.1);
+  backdrop-filter: blur(4px);
 }
 :is(
   [data-slot='dialog-content'],
@@ -176,7 +239,7 @@
   [data-slot='route-overlay-content']
 ) {
   border: 1px solid var(--border);
-  box-shadow: var(--overlay-shadow);
+  box-shadow: none;
 }
 [data-slot='route-overlay-content'][data-presentation='dialog'] {
   border-radius: var(--radius-xl);
@@ -189,16 +252,13 @@
 :is([data-slot='dialog-description'], [data-slot='alert-dialog-description']) {
   line-height: 1.65;
 }
-:is(
-    [data-slot='dialog-footer'],
-    [data-slot='alert-dialog-footer'],
-    [data-slot='route-overlay-footer']
-  )
-  > button {
+:is([data-slot='dialog-footer'], [data-slot='alert-dialog-footer']) > button {
   min-height: calc(var(--spacing) * 10);
   padding-inline: calc(var(--spacing) * 4);
 }
-[data-slot='dialog-content'] > [data-slot='dialog-close'] {
+/* Route overlays compose the dialog primitives, so their close button sits where a dialog's does. */
+:is([data-slot='dialog-content'], [data-slot='route-overlay-content'])
+  > [data-slot='dialog-close'] {
   top: calc(var(--spacing) * 4);
   right: calc(var(--spacing) * 4);
 }
@@ -308,14 +368,65 @@
   padding-right: calc(var(--spacing) * 24);
 }
 
-/* Compact content can stay dense while the primary navigation remains comfortable.
-   The primitive's important icon-mode sizes still control the collapsed rail. */
-:root[data-theme='compact'] .app-navigation [data-slot='sidebar-menu-button'] {
-  height: calc(var(--spacing) * 12);
-  padding-inline: calc(var(--spacing) * 4);
+/* The navigation's rows are roomier than the sidebar primitive's: 10 units
+   high with half a unit between them, nested rows 8.5 high, in a sidebar 64
+   units wide (layouts/components/app-sidebar.tsx). The primitive's important
+   icon-mode sizes still control the collapsed rail. */
+.app-navigation [data-slot='sidebar-menu'] {
+  gap: calc(var(--spacing) * 0.5);
+}
+/* Top-level groups only: a section nested in a menu sits flush. */
+.app-navigation > nav > [data-slot='sidebar-group'] {
+  padding: calc(var(--spacing) * 2);
+}
+/* A section's heading reads as a heading over its entries, not as one of
+   them: half the menu's foreground, mixed toward its ground, so both colour
+   schemes follow. */
+.app-navigation [data-sidebar='group-label'] {
+  height: calc(var(--spacing) * 8);
+  padding-inline: calc(var(--spacing) * 3.5);
+  color: color-mix(in oklch, var(--sidebar-foreground) 50%, var(--sidebar));
+}
+.app-navigation [data-slot='sidebar-menu-button'] {
+  height: calc(var(--spacing) * 10);
+  gap: calc(var(--spacing) * 2);
+  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);
+}
+/* The primitive places a row's count and its expand button for 8-unit rows;
+   both are 5 units high, so this centres them on the taller rows. */
+.app-navigation
+  [data-slot='sidebar-menu-item']
+  > :is([data-slot='sidebar-menu-badge'], [data-slot='sidebar-menu-action']) {
+  top: calc(var(--spacing) * 2.5);
+}
+.app-navigation
+  [data-slot='sidebar-menu-sub-item']
+  > [data-slot='sidebar-menu-action'] {
+  top: calc(var(--spacing) * 1.75);
+}
+.app-navigation [data-slot='sidebar-menu-button'] > svg {
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
+}
+/* An entry with a count (navigation-menu.tsx) leaves room for it at the
+   row's end, so a long label truncates before reaching it. */
+.app-navigation
+  [data-slot='sidebar-menu-item']:has(> [data-slot='sidebar-menu-badge'])
+  > [data-slot='sidebar-menu-button'] {
+  padding-right: calc(var(--spacing) * 10);
 }
-:root[data-theme='compact'] .app-navigation [data-slot='sidebar-menu'] {
-  gap: calc(var(--spacing) * 1.5);
+.app-navigation [data-slot='sidebar-menu-sub'] {
+  gap: calc(var(--spacing) * 0.5);
+  padding-block: calc(var(--spacing) * 1);
+}
+.app-navigation [data-slot='sidebar-menu-sub-button'] {
+  height: calc(var(--spacing) * 8.5);
+  gap: calc(var(--spacing) * 2);
+  padding-inline: calc(var(--spacing) * 2.5);
+}
+.app-navigation [data-slot='sidebar-menu-sub-button'] > svg {
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
 }
 
 /* Brand tint belongs to the application shell, independent of each page's content. */
@@ -331,11 +442,20 @@
 
 /* Shared table hierarchy stays neutral so semantic status colors remain distinct. */
 [data-slot='table-header'] {
-  background: color-mix(in srgb, var(--muted) 70%, var(--card));
+  background: var(--hover);
 }
 [data-slot='table-header'] [data-slot='table-row']:hover {
   background: transparent;
 }
+/* A row under the pointer takes the --hover grey, as every hovered row and
+   list item does, rather than the primitive's half of --muted. Matched by
+   that class, so a row given another hover keeps it, and a selected row
+   keeps its own ground. */
+[data-slot='table-row'][class~='hover:bg-muted/50']:hover:not(
+    [data-state='selected']
+  ) {
+  background: var(--hover);
+}
 [data-slot='table-head'] {
   height: calc(var(--spacing) * 12);
   padding-inline: calc(var(--spacing) * 3);
@@ -355,12 +475,125 @@
   color: var(--primary);
 }
 
-/* Nested items keep a comfortable rhythm independently of compact content. */
-.app-navigation [data-slot='sidebar-menu-sub-button'] {
+/* A card's frame in the general border, as every other line: the card
+   primitive and the plugins' copies draw their ring at a tenth of the
+   foreground. Matched by that class, so a card given another ring colour
+   keeps it; unlayered, so it wins over the utility. */
+[data-slot='card'][class~='ring-foreground/10'] {
+  --tw-ring-color: var(--border);
+}
+
+/* Line tabs as a record page's tabs: from the left, the open one in the
+   foreground over a 2px line that sits on a thin rule under the row, the
+   others muted until hovered. Unlayered, so it wins over the primitive's
+   utilities. A row whose tabs keep off its edges sets --tabs-inset; its rule
+   still runs edge to edge. */
+[data-slot='tabs-list'][data-variant='line'][data-orientation='horizontal'] {
+  width: 100%;
+  height: auto;
+  justify-content: flex-start;
+  gap: calc(var(--spacing) * 5);
+  padding: 0 var(--tabs-inset, 0px);
+  border-bottom: 1px solid var(--border);
+}
+[data-slot='tabs-list'][data-variant='line'][data-orientation='horizontal']
+  > [data-slot='tabs-trigger'] {
+  flex: none;
   height: calc(var(--spacing) * 10);
-  padding-inline: calc(var(--spacing) * 3);
+  padding-inline: 0;
+  border-inline-width: 0;
+  color: var(--muted-foreground);
 }
-.app-navigation [data-slot='sidebar-menu-sub'] {
-  gap: calc(var(--spacing) * 1.5);
-  padding-block: calc(var(--spacing) * 1.5);
+[data-slot='tabs-list'][data-variant='line'][data-orientation='horizontal']
+  > [data-slot='tabs-trigger']:is(:hover, [data-active]) {
+  color: var(--foreground);
+}
+[data-slot='tabs-list'][data-variant='line'][data-orientation='horizontal']
+  > [data-slot='tabs-trigger']::after {
+  bottom: -1px;
+  height: 2px;
+}
+
+/* Every scrollbar, across and down: a thin rounded bar in a faint grey on no
+   track, drawn only while its element scrolls or the mouse is near the edge
+   it runs along (revealScrollbarsWhileScrolling
+   in client/lib/scrollbar.ts marks it `data-scrolling` until it has been
+   still for a moment) and transparent otherwise, so showing it moves nothing;
+   a little firmer under the pointer. Chromium and Safari draw it through the
+   -webkit- pseudo-elements, which allow a thinner bar than
+   `scrollbar-width: thin`; they ignore those wherever the standard properties
+   are set (scrollbar-color is inherited), so the standard ones are given only
+   to a browser without them (Firefox). */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: transparent;
+}
+[data-scrolling]::-webkit-scrollbar-thumb {
+  background-color: color-mix(
+    in oklab,
+    var(--muted-foreground) 20%,
+    transparent
+  );
+}
+[data-scrolling]::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(
+    in oklab,
+    var(--muted-foreground) 30%,
+    transparent
+  );
+}
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+  [data-scrolling] {
+    scrollbar-color: color-mix(
+        in oklab,
+        var(--muted-foreground) 20%,
+        transparent
+      )
+      transparent;
+  }
+}
+
+/* A scroller whose bar always shows, thicker, to be dragged: one wider than
+   the page, such as a board, which a mouse without a sideways wheel moves
+   only by its bar. Plain rules beside the ones above rather than a utility,
+   which their unlayered rules would outrank. */
+.scroll-shown::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.scroll-shown::-webkit-scrollbar-thumb {
+  background-color: color-mix(
+    in oklab,
+    var(--muted-foreground) 25%,
+    transparent
+  );
+}
+.scroll-shown::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(
+    in oklab,
+    var(--muted-foreground) 40%,
+    transparent
+  );
+}
+@supports not selector(::-webkit-scrollbar) {
+  .scroll-shown {
+    scrollbar-color: color-mix(
+        in oklab,
+        var(--muted-foreground) 25%,
+        transparent
+      )
+      transparent;
+  }
 }

package/client/theme/theme-settings.tsx

@@ -36,7 +36,7 @@ export function ThemeSettings(): ReactElement {
             aria-label={title}
             size='icon'
             variant='outline'
-            className='size-10 rounded-xl border-border/70 bg-background/60 hover:bg-accent/50'
+            className='size-10 rounded-xl border-border bg-background/60 hover:bg-accent/50'
           />
         }
       >
@@ -70,13 +70,15 @@ export function ThemeSettings(): ReactElement {
                 <label
                   key={mode}
                   className={cn(
-                    'relative flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-colors select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ring',
+                    'relative flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-colors select-none',
                     isSelected
                       ? 'bg-background text-foreground shadow-xs'
                       : 'text-muted-foreground hover:bg-background/40 hover:text-foreground',
                   )}
                 >
-                  <RadioGroupItem value={mode} className='sr-only' />
+                  {/* `absolute` over the primitive's `relative`, which would keep
+                      the hidden radio in the row and push the words aside. */}
+                  <RadioGroupItem value={mode} className='absolute sr-only' />
                   <ModeIcon aria-hidden='true' className='size-3.5 shrink-0' />
                   <span className='whitespace-nowrap'>
                     {t('appearance.' + mode, {
@@ -109,18 +111,21 @@ export function ThemeSettings(): ReactElement {
                 <label
                   key={item.id}
                   className={cn(
-                    'group relative flex cursor-pointer flex-col rounded-xl border p-2 text-left transition-all select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ring',
+                    'group relative flex cursor-pointer flex-col rounded-xl border p-2 text-left transition-all select-none',
                     isSelected
                       ? 'border-primary ring-2 ring-primary/20 bg-primary/5 shadow-xs'
-                      : 'border-border/70 hover:border-border hover:bg-muted/30',
+                      : 'border-border hover:bg-muted/30',
                   )}
                 >
-                  <RadioGroupItem value={item.id} className='sr-only' />
+                  <RadioGroupItem
+                    value={item.id}
+                    className='absolute sr-only'
+                  />
                   <div className='mb-2 h-16 w-full'>
                     <div
                       aria-hidden='true'
                       data-theme={item.id}
-                      className='theme-preview relative flex h-full overflow-hidden rounded-lg border border-border/80 bg-background shadow-2xs'
+                      className='theme-preview relative flex h-full overflow-hidden rounded-lg border border-border bg-background shadow-2xs'
                     >
                       {/* Mini Sidebar */}
                       <div className='flex w-6 flex-col gap-1 border-r border-sidebar-border/50 bg-sidebar p-1'>

package/client/theme/themes/compact.css

@@ -9,7 +9,7 @@
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
     'Courier New', monospace;
   --font-heading: var(--font-sans);
-  --spacing: 0.2rem;
+  --spacing: 0.225rem;
   --text-xs: 0.75rem;
   --text-xs--line-height: calc(1 / 0.75);
   --text-sm: 0.875rem;
@@ -45,15 +45,11 @@
   --shadow-xl:
     0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --radius: 0.375rem;
+  --radius: 0.5rem;
   --background: oklch(0.985 0 0);
   --foreground: oklch(0.16 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.16 0 0);
-  --overlay-backdrop: rgb(15 23 42 / 0.28);
-  --overlay-shadow:
-    0 24px 64px -16px rgb(15 23 42 / 0.22),
-    0 8px 24px -12px rgb(15 23 42 / 0.16);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.16 0 0);
   --primary: #002ad1;
@@ -71,8 +67,9 @@
   --muted-foreground: oklch(0.52 0 0);
   --accent: rgb(237 242 255);
   --accent-foreground: rgb(0 42 209);
+  --hover: color-mix(in srgb, var(--muted) 70%, var(--card));
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.9 0 0);
+  --border: oklch(0.9 0 0 / 60%);
   --input: oklch(0.9 0 0);
   --ring: var(--primary);
   --chart-1: oklch(0.646 0.222 41.116);
@@ -84,8 +81,8 @@
   --sidebar-foreground: var(--card-foreground);
   --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--hover);
+  --sidebar-accent-foreground: var(--sidebar-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }
@@ -96,9 +93,6 @@
   --foreground: oklch(0.96 0 0);
   --card: oklch(0.18 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --overlay-backdrop: rgb(0 0 0 / 0.58);
-  --overlay-shadow:
-    0 24px 64px -16px rgb(0 0 0 / 0.6), 0 8px 24px -12px rgb(0 0 0 / 0.4);
   --popover: oklch(0.18 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: #8ca9ff;
@@ -113,6 +107,7 @@
   --muted-foreground: oklch(0.7 0 0);
   --accent: rgb(30 42 72);
   --accent-foreground: rgb(174 194 255);
+  --hover: color-mix(in srgb, var(--muted) 70%, var(--card));
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
@@ -126,8 +121,8 @@
   --sidebar-foreground: var(--card-foreground);
   --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--hover);
+  --sidebar-accent-foreground: var(--sidebar-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }

package/client/theme/themes/default.css

@@ -51,10 +51,6 @@
   --foreground: oklch(0.16 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.16 0 0);
-  --overlay-backdrop: rgb(15 23 42 / 0.28);
-  --overlay-shadow:
-    0 24px 64px -16px rgb(15 23 42 / 0.22),
-    0 8px 24px -12px rgb(15 23 42 / 0.16);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.16 0 0);
   --primary: #002ad1;
@@ -72,8 +68,9 @@
   --muted-foreground: oklch(0.52 0 0);
   --accent: rgb(237 242 255);
   --accent-foreground: rgb(0 42 209);
+  --hover: color-mix(in srgb, var(--muted) 70%, var(--card));
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.9 0 0);
+  --border: oklch(0.9 0 0 / 60%);
   --input: oklch(0.9 0 0);
   --ring: var(--primary);
   --chart-1: oklch(0.646 0.222 41.116);
@@ -85,8 +82,8 @@
   --sidebar-foreground: var(--card-foreground);
   --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--hover);
+  --sidebar-accent-foreground: var(--sidebar-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }
@@ -98,9 +95,6 @@
   --foreground: oklch(0.96 0 0);
   --card: oklch(0.18 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --overlay-backdrop: rgb(0 0 0 / 0.58);
-  --overlay-shadow:
-    0 24px 64px -16px rgb(0 0 0 / 0.6), 0 8px 24px -12px rgb(0 0 0 / 0.4);
   --popover: oklch(0.18 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: #8ca9ff;
@@ -115,6 +109,7 @@
   --muted-foreground: oklch(0.7 0 0);
   --accent: rgb(30 42 72);
   --accent-foreground: rgb(174 194 255);
+  --hover: color-mix(in srgb, var(--muted) 70%, var(--card));
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
@@ -128,8 +123,8 @@
   --sidebar-foreground: var(--card-foreground);
   --sidebar-primary: color-mix(in srgb, var(--primary) 8%, var(--sidebar));
   --sidebar-primary-foreground: var(--primary);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent: var(--hover);
+  --sidebar-accent-foreground: var(--sidebar-foreground);
   --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nocobase/app-template-default",
   "displayName": "Default Template",
-  "version": "1.0.0-beta.67",
+  "version": "1.0.0-beta.69",
   "type": "module",
   "prettier": "@nocobase/dev-config/prettier",
   "engines": {
@@ -9,13 +9,12 @@
   },
   "nocobase": {
     "templateKind": "app",
-    "defaultTemplateVersion": "1.0.0-beta.67"
+    "defaultTemplateVersion": "1.0.0-beta.69"
   },
   "devDependencies": {
     "@ai-sdk/react": "2.0.0",
     "@base-ui/react": "^1.6.0",
     "@dicebear/core": "^9.4.3",
-    "@gchust/agent-annotations": "0.1.9",
     "@hookform/resolvers": "^5.0.1",
     "@playwright/test": "^1.62.1",
     "@refinedev/cli": "^2.16.48",
@@ -27,6 +26,7 @@
     "@tailwindcss/postcss": "^4.1.4",
     "@tailwindcss/vite": "^4.1.8",
     "@tanstack/react-query": "^5.81.5",
+    "@tanstack/react-table": "^8.2.6",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.3",
@@ -75,13 +75,13 @@
     "vite": "^6.3.5",
     "vitest": "^4.1.10",
     "tar": "^7.5.22",
-    "@nocobase/app-client": "^3.0.0-beta.1",
+    "@nocobase/app-client": "^3.0.0-beta.2",
     "@nocobase/app-plugin-template-print": "0.0.2-beta.2",
-    "@nocobase/app-skills": "0.1.0-beta.34",
-    "@nocobase/app-testing": "0.1.0-beta.3",
+    "@nocobase/app-skills": "0.1.0-beta.37",
+    "@nocobase/app-testing": "0.1.0-beta.4",
     "@nocobase/app-websocket": "^0.0.2-beta.0",
-    "@nocobase/dev-config": "0.1.0-beta.22",
-    "@nocobase/drive": "^0.1.0-beta.5",
+    "@nocobase/drive": "^0.1.0-beta.6",
+    "@nocobase/dev-config": "0.1.0-beta.23",
     "@nocobase/logging": "^0.1.0-beta.7",
     "@nocobase/session": "^0.1.0-beta.3"
   },
@@ -142,35 +142,35 @@
     "@oclif/core": "^4.14.0",
     "better-auth": "1.7.5",
     "hono": "^4.13.2",
-    "@nocobase/app-plugin-api-keys": "^1.0.0-beta.16",
-    "@nocobase/app-plugin-authentication": "^2.0.0-beta.7",
-    "@nocobase/app-plugin-authorization": "^1.0.0-beta.27",
-    "@nocobase/app-plugin-database-explorer": "^1.0.0-beta.14",
-    "@nocobase/app-plugin-file": "^1.0.0-beta.23",
+    "@nocobase/app-plugin-api-keys": "^1.0.0-beta.17",
+    "@nocobase/app-plugin-authentication": "^2.0.0-beta.10",
+    "@nocobase/app-plugin-authorization": "^1.0.0-beta.28",
+    "@nocobase/app-plugin-database-explorer": "^1.0.0-beta.15",
     "@nocobase/app-plugin-i18n": "^1.0.0-beta.16",
-    "@nocobase/app-plugin-mail": "^1.0.0-beta.13",
+    "@nocobase/app-plugin-mail": "^1.0.0-beta.14",
+    "@nocobase/app-plugin-file": "^1.0.0-beta.24",
     "@nocobase/app-plugin-notification": "^1.0.0-beta.27",
-    "@nocobase/app-plugin-notification-in-app": "^1.0.0-beta.24",
-    "@nocobase/app-plugin-notification-providers": "^0.2.0-beta.11",
+    "@nocobase/app-plugin-notification-in-app": "^1.0.0-beta.25",
+    "@nocobase/app-plugin-notification-providers": "^0.2.0-beta.12",
     "@nocobase/app-plugin-scheduler": "^1.0.0-beta.17",
-    "@nocobase/app-plugin-users": "^2.0.0-beta.4",
-    "@nocobase/app-server": "^2.0.0-beta.5",
+    "@nocobase/app-plugin-users": "^2.0.0-beta.5",
     "@nocobase/config": "^0.1.0-beta.3",
-    "@nocobase/db": "^1.0.0-beta.19",
-    "@nocobase/db-sqlite": "^0.1.0-beta.5",
+    "@nocobase/app-server": "^2.0.0-beta.8",
+    "@nocobase/db": "^1.0.0-beta.21",
     "@nocobase/service-provider": "^0.0.2-beta.2",
+    "@nocobase/db-sqlite": "^0.1.0-beta.6",
     "@nocobase/snowflake": "^1.0.0-beta.4",
     "@nocobase/app-plugin-authz-default-access": "^1.0.0-beta.13",
     "@nocobase/app-plugin-authz-sharing-rules": "^1.0.0-beta.13",
     "@nocobase/app-plugin-authz-restriction-rules": "^1.0.0-beta.12",
-    "@nocobase/authorization": "^1.0.0-beta.13",
+    "@nocobase/authorization": "^1.0.0-beta.14",
     "@nocobase/queue": "^0.1.0-beta.9",
     "@nocobase/jobs": "^0.1.0-beta.3",
-    "@nocobase/lifecycle": "^0.1.0-beta.1",
+    "@nocobase/lifecycle": "^0.1.0-beta.2",
     "@nocobase/i18n": "^1.0.0-beta.7",
-    "@nocobase/caching": "^0.1.0-beta.3",
     "@nocobase/repository-input": "^0.1.0-beta.3",
-    "@nocobase/app-cli": "^1.0.0-beta.21"
+    "@nocobase/caching": "^0.1.0-beta.3",
+    "@nocobase/app-cli": "^1.0.0-beta.23"
   },
   "description": "NocoBase 3 application template with the standard product capabilities.",
   "imports": {
@@ -178,7 +178,8 @@
     "#hooks/*": "./client/hooks/*.js",
     "#lib/*": "./client/lib/*.js",
     "#extensions/*": "./client/extensions/*.js",
-    "#pages/*": "./client/pages/*.js"
+    "#pages/*": "./client/pages/*.js",
+    "#components/data-table": "./client/components/data-table/index.js"
   },
   "scripts": {
     "postinstall": "nocobase skills sync",

package/server/app.ts

@@ -1,3 +1,4 @@
+import { MailerProvider } from '@nocobase/app-server/mailer';
 import type { Application } from '@nocobase/app-server/application';
 import { DatabaseProvider } from '@nocobase/app-server/database';
 import { I18nProvider, i18nHttpMiddleware } from '@nocobase/app-server/i18n';
@@ -33,6 +34,7 @@ export function createApp(runtime: AppRuntimeContext): Application {
   app.addServiceProvider(SecretsProvider);
   app.addServiceProvider(SessionProvider);
   app.addServiceProvider(DriveProvider);
+  app.addServiceProvider(MailerProvider);
   app.addServiceProvider(QueueServiceProvider, {
     nodeEnv: runtime.env.NODE_ENV,
   });